prevent double focus events

Author: e-hein

.npmrc

@@ -0,0 +1 @@
+package-lock=false

src/emulate-tab.ts

@@ -44,7 +44,6 @@ function emulateTabFromSourceToTarget(source: HTMLElement, target: HTMLElement,
       if (ev === tabKeydown) {
         if (source instanceof HTMLElement) {
           source.blur();
-          source.dispatchEvent(new FocusEvent('blur'));
         }
 
         emulateEventsAtTabTarget(target, direction);
@@ -71,7 +70,6 @@ function emulateEventsAtTabTarget(target: HTMLElement, direction: TabDirection)
   if (target instanceof HTMLInputElement) {
     target.selectionStart = 0;
   }
-  target.dispatchEvent(new FocusEvent('focus'));
 
   const tabKeyup = createTabEvent('keyup', direction);
   target.dispatchEvent(tabKeyup);

test/in-plain-html-js/package.json

@@ -7,6 +7,11 @@
     "start": "node -r ts-node/register src/app.ts",
     "watch_start": "npm-watch start",
     "test": "karma start",
+    "install-emulate-tab": "npm i ../../tmp/emulate-tab.latest.tgz",
+    "uninstall-emulate-tab": "npm i ../../tmp/emulate-tab.latest.tgz",
+    "reinstall-emulate-tab": "npm run uninstall-emulate-tab",
+    "postreinstall-emulate-tab": "npm run install-emulate-tab",
+    "pretest:once": "npm run reinstall-emulate-tab",
     "test:once": "karma start --browsers=ChromeHeadless,FirefoxHeadless --single-run"
   },
   "watch": {

test/in-typescript-requirejs/package.json

@@ -7,6 +7,11 @@
     "start": "node -r ts-node/register src/app.ts",
     "watch_start": "npm-watch start",
     "test": "karma start",
+    "install-emulate-tab": "npm i ../../tmp/emulate-tab.latest.tgz",
+    "uninstall-emulate-tab": "npm i ../../tmp/emulate-tab.latest.tgz",
+    "reinstall-emulate-tab": "npm run uninstall-emulate-tab",
+    "postreinstall-emulate-tab": "npm run install-emulate-tab",
+    "precoverage": "npm run reinstall-emulate-tab",
     "coverage": "karma start --browsers=ChromeHeadless,FirefoxHeadless --single-run",
     "test-node-module": "karma start karma.node-module.conf.js --browsers=ChromeHeadless,FirefoxHeadless --single-run"
   },

test/in-typescript-requirejs/src/app.spec.ts

@@ -31,34 +31,4 @@ xdescribe('demo app', () => {
   describe('initially', () => {
     it('log should be empty', () => expect(getEventLog()).toEqual(''));
   });
-
-  describe('after write "a" into first input', () => {
-    beforeEach(() => {
-      const firstInput = eventCheck.view.firstInput;
-      firstInput.value = 'a';
-      const event = new KeyboardEvent('keydown', { code: 'keyA' });
-      console.log('event', event);
-      firstInput.dispatchEvent(event);
-      return new Promise(done => setTimeout(done, 10));
-    });
-
-    it('log should contain entries', () => expect(getEventLog()).toContain('keyA'));
-  });
-
-  describe('after emulating tab', () => {
-    beforeEach(() => {
-      eventCheck.view.emulateTabButton.click();
-    });
-
-    it('should trigger all events', () => {
-      expect(getEventLog().split(/\s*\n\s*/)).toEqual(`
-        first-input (keydown): Tab
-        parent-of-first-input (keydown): Tab
-        first-input (blur): blur
-        second-input (focus): focus
-        second-input (keyup): Tab
-        parent-of-second-input (keyup): Tab
-      `.split(/\s*\n\s*/).slice(1));
-    })
-  });
 });

test/in-typescript-requirejs/src/app.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import * as tsNode from 'ts-node';
 import * as fs from 'fs';
 import * as emulateTab from '../../../dist';
+import { Server } from 'http';
 
 if (!emulateTab) {
   throw new Error('no emulate tab???');
@@ -92,5 +93,5 @@ app.get('/favicon.ico',
 );
 app.get('/:filename', serveFiles('html', 'text/html'));
 
-export const server = app.listen(port);
+export const server: Server = app.listen(port);
 console.log('app running on ' + port);

test/in-typescript-requirejs/src/event-check.spec.ts

@@ -1,13 +1,77 @@
+import { EventCheck } from './event-check.model';
+
 describe('event check', () => {
+  let eventCheck: EventCheck;
+  let origLog: any;
+  let logSpy: jasmine.Spy;
+
+  function getEventLog(): string {
+    return eventCheck.view.eventLog.innerHTML;
+  }
+  
   beforeAll(() => {
     fixture.setBase('src');
     document.body.appendChild(fixture.el);
   });
 
   beforeEach(() => {
+    origLog = console.log;
+    logSpy = spyOn(console, 'log');
     fixture.cleanup();
     fixture.load('event-check.html');
+    eventCheck = new EventCheck();
+    eventCheck.init();
   });
 
+  afterEach(() => {
+    console.log = origLog;
+  })
+
   it('should start', () => expect().nothing());
-});
+
+  describe('after write "a" into first input', () => {
+    beforeEach(() => {
+      const firstInput = eventCheck.view.firstInput;
+      firstInput.value = 'a';
+      const event = new KeyboardEvent('keydown', { code: 'keyA' });
+      console.log('event', event);
+      firstInput.dispatchEvent(event);
+      return new Promise(done => setTimeout(done, 10));
+    });
+
+    it('log should contain entries', () => expect(getEventLog()).toContain('keyA'));
+  });
+
+  describe('after emulating tab', () => {
+    beforeEach(() => {
+      eventCheck.view.emulateTabButton.click();
+    });
+
+    it('should have triggered all events', () => {
+      const actualEventLog = normalizeEventLog(getEventLog());
+      const expectedEventLog = normalizeEventLog(`
+        first-input (focus): focus
+        first-input (keydown): Tab
+        parent-of-first-input (keydown): Tab
+        first-input (blur): blur
+        second-input (focus): focus
+        second-input (keyup): Tab
+        parent-of-second-input (keyup): Tab
+      `);
+      expect(actualEventLog).toEqual(expectedEventLog);
+      expect(eventCount(actualEventLog)).toEqual(eventCount(expectedEventLog));
+    })
+  });
+});
+
+function normalizeEventLog(log: string) {
+  let normalized = log.split(/(\s*\n)+\s*/).join('');
+  if (!normalized.startsWith('\n')) {
+    normalized = '\n' + normalized;
+  }
+  return normalized;
+}
+
+function eventCount(normalizedLog: string) {
+  return normalizedLog.split('\n').length - 1;
+}