Start migrating to typescript

addon-test-support/-private/get-element-with-assert.ts

@@ -0,0 +1,10 @@
+import getElement from './get-element';
+import { ElementOrSelector } from './types';
+
+export default function getElementWithAssert(selectorOrElement: ElementOrSelector, contextEl: ElementOrSelector) : HTMLElement {
+  let el = getElement(selectorOrElement, contextEl);
+  if (el) {
+    return el;
+  }
+  throw new Error(`Element ${selectorOrElement} not found.`);
+}

addon-test-support/-private/get-element.js → addon-test-support/-private/get-element.ts

@@ -1,13 +1,7 @@
 import settings from '../settings';
+import { ElementOrSelector } from './types';
 
-/*
-  @method getElement
-  @param {String|HTMLElement} selectorOrElement
-  @param {HTMLElement} contextEl to query within, query from its contained DOM
-  @return HTMLElement
-  @private
-*/
-export default function getElement(selectorOrElement, contextEl) {
+export default function getElement(selectorOrElement: ElementOrSelector, contextEl: ElementOrSelector) : HTMLElement {
   if (selectorOrElement instanceof HTMLElement) {
     return selectorOrElement;
   }
@@ -17,5 +11,5 @@ export default function getElement(selectorOrElement, contextEl) {
   } else {
     result = document.querySelector(`${settings.rootElement} ${selectorOrElement}`);
   }
-  return result;
+  return result as HTMLElement;
 }

addon-test-support/-private/is-focusable.ts

@@ -0,0 +1,15 @@
+const focusableTypes = [
+  HTMLInputElement,
+  HTMLButtonElement,
+  HTMLLinkElement,
+  HTMLSelectElement,
+  HTMLAnchorElement,
+  HTMLTextAreaElement
+];
+export default function isFocusable(el: HTMLElement) : boolean {
+  if (el instanceof HTMLInputElement && el.type === 'hidden') {
+    return false;
+  }
+
+  return focusableTypes.some((type) => el instanceof type) || el.contentEditable === 'true';
+}

addon-test-support/-private/types.ts

@@ -0,0 +1,6 @@
+export type ElementOrSelector = string | HTMLElement;
+export interface EventOptions {
+  bubbles?: boolean,
+  cancelable?: boolean,
+  [propName: string]: any;
+};

addon-test-support/find.js → addon-test-support/find.ts

@@ -1,5 +1,5 @@
 import getElement from './-private/get-element';
-
+import { ElementOrSelector } from './-private/types';
 /*
   The find test helper uses `querySelector` to search inside the test
   DOM (based on app configuration for the rootElement).
@@ -8,11 +8,8 @@ import getElement from './-private/get-element';
   DOM context to search within.
 
   @method find
-  @param {String} CSS selector to find one or more elements in the test DOM
-  @param {HTMLElement} contextEl to query within, query from its contained DOM
-  @return {null|HTMLElement} null or an element
   @public
 */
-export function find(selector, contextEl) {
+export function find(selector: ElementOrSelector, contextEl: ElementOrSelector) : ElementOrSelector {
   return getElement(selector, contextEl);
 }

addon-test-support/fire-event.js → addon-test-support/fire-event.ts

@@ -1,23 +1,16 @@
 import Ember from 'ember';
+import { EventOptions } from './-private/types';
 
 const { merge } = Ember;
-const DEFAULT_EVENT_OPTIONS = { bubbles: true, cancelable: true };
+const DEFAULT_EVENT_OPTIONS: EventOptions = { bubbles: true, cancelable: true };
 const KEYBOARD_EVENT_TYPES = ['keydown', 'keypress', 'keyup'];
 const MOUSE_EVENT_TYPES = ['click', 'mousedown', 'mouseup', 'dblclick', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover'];
 
-/*
-  @method fireEvent
-  @param {HTMLElement} element
-  @param {String} type
-  @param {Object} (optional) options
-  @return {Event} The dispatched event
-  @private
-*/
-export function fireEvent(element, type, options = {}) {
+export function fireEvent(element: HTMLElement, type: string, options: EventOptions = {}): Event {
   if (!element) {
     return;
   }
-  let event;
+  let event: Event;
   if (KEYBOARD_EVENT_TYPES.indexOf(type) > -1) {
     event = buildKeyboardEvent(type, options);
   } else if (MOUSE_EVENT_TYPES.indexOf(type) > -1) {
@@ -38,41 +31,19 @@ export function fireEvent(element, type, options = {}) {
   return event;
 }
 
-/*
-  @method buildBasicEvent
-  @param {String} type
-  @param {Object} (optional) options
-  @return {Event}
-  @private
-*/
-function buildBasicEvent(type, options = {}) {
+function buildBasicEvent(type: string, { bubbles = true, cancelable = true, ...otherOptions }: EventOptions = {}): Event {
   let event = document.createEvent('Events');
 
-  let bubbles = options.bubbles !== undefined ? options.bubbles : true;
-  let cancelable = options.cancelable !== undefined ? options.cancelable : true;
-
-  delete options.bubbles;
-  delete options.cancelable;
-
-  // bubbles and cancelable are readonly, so they can be
-  // set when initializing event
+  // bubbles and cancelable are readonly, so they can be set when initializing event
   event.initEvent(type, bubbles, cancelable);
-  merge(event, options);
+  merge(event, otherOptions);
   return event;
 }
 
-/*
-  @method buildMouseEvent
-  @param {String} type
-  @param {Object} (optional) options
-  @return {Event}
-  @private
-*/
-function buildMouseEvent(type, options = {}) {
-  let event;
+function buildMouseEvent(type: string, options: EventOptions = {}): Event {
   try {
-    event = document.createEvent('MouseEvents');
-    let eventOpts = merge(merge({}, DEFAULT_EVENT_OPTIONS), options);
+    let event = document.createEvent('MouseEvents');
+    let eventOpts: EventOptions = merge(merge({}, DEFAULT_EVENT_OPTIONS), options);
     event.initMouseEvent(
       type,
       eventOpts.bubbles,
@@ -89,10 +60,10 @@ function buildMouseEvent(type, options = {}) {
       eventOpts.metaKey,
       eventOpts.button,
       eventOpts.relatedTarget);
-  } catch (e) {
-    event = buildBasicEvent(type, options);
+    return event;
+  } catch(e) {
+    return buildBasicEvent(type, options);
   }
-  return event;
 }
 
 /*
@@ -102,7 +73,7 @@ function buildMouseEvent(type, options = {}) {
   @return {Event}
   @private
 */
-function buildKeyboardEvent(type, options = {}) {
+function buildKeyboardEvent(type: string, options: EventOptions = {}): KeyboardEvent {
   let eventOpts = merge(merge({}, DEFAULT_EVENT_OPTIONS), options);
   let event, eventMethodName;
 

addon-test-support/settings.js → addon-test-support/settings.ts

@@ -4,6 +4,7 @@
   @class TestSupportSettings
 */
 class TestSupportSettings {
+  private _rootElement: string;
 
   constructor(init = { rootElement: '#ember-testing' }) {
     this._rootElement = init.rootElement;

app/config/environment.d.ts

@@ -0,0 +1,15 @@
+export default config;
+
+/**
+ * Type declarations for
+ *    import config from './config/environment'
+ *
+ * For now these need to be managed by the developer
+ * since different ember addons can materialize new entries.
+ */
+declare namespace config {
+  export var environment: any;
+  export var modulePrefix: string;
+  export var podModulePrefix: string;
+  export var locationType: string;
+}

package.json

@@ -26,9 +26,12 @@
   },
   "dependencies": {
     "broccoli-funnel": "^1.1.0",
-    "ember-cli-babel": "^6.1.0"
+    "ember-cli-typescript": "^0.4.0",
+    "ember-cli-babel": "^6.1.0",
+    "typescript": "^2.1"
   },
   "devDependencies": {
+    "@types/ember": "^2.7.34",
     "broccoli-asset-rev": "^2.4.5",
     "ember-cli": "~2.13.1",
     "ember-cli-dependency-checker": "^1.3.0",

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "noEmitOnError": false,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "ember-native-dom-helpers/tests/*": ["tests/*"],
+      "ember-native-dom-helpers/*": ["app/*"]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "tests/**/*"
+  ]
+}