Merge pull request #6 from dougflip/dd/component-helpers

Adds dngComponent to help bootstrap components

Author: dougflip

dist/dng-test-utils.js

@@ -45,7 +45,7 @@ module.exports =
 /* 0 */
 /***/ function(module, exports, __webpack_require__) {
 
-	"use strict";
+	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
@@ -59,7 +59,11 @@ module.exports =
 
 	var _dngDefer2 = _interopRequireDefault(_dngDefer);
 
-	var _dngModule = __webpack_require__(3);
+	var _dngComponent = __webpack_require__(3);
+
+	var _dngComponent2 = _interopRequireDefault(_dngComponent);
+
+	var _dngModule = __webpack_require__(4);
 
 	var _dngModule2 = _interopRequireDefault(_dngModule);
 
@@ -68,14 +72,15 @@ module.exports =
 	// FIXME: Is there any way around this?
 	var ng = window.angular;
 
-	var dngTestModule = ng.module('dngTestUtils', []).factory('dngDefer', _dngDefer2.default).factory('dngNullMock', function () {
+	var dngTestModule = ng.module('dngTestUtils', []).factory('dngDefer', _dngDefer2.default).factory('dngComponent', _dngComponent2.default).factory('dngNullMock', function () {
 	  return _dngNullMock2.default;
 	});
 
 	exports.default = {
 	  name: dngTestModule.name,
 	  nullMock: _dngNullMock2.default,
-	  init: _dngModule2.default.init
+	  init: _dngModule2.default.init,
+	  initWithKarmaTemplates: _dngModule2.default.initWithKarmaTemplates
 	};
 
 /***/ },
@@ -180,6 +185,55 @@ module.exports =
 
 /***/ },
 /* 3 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	var angular = window.angular;
+
+	exports.default = function ($rootScope, $compile) {
+	  function digest(fn) {
+	    fn();
+	    $rootScope.$digest();
+	  }
+
+	  function createScope() {
+	    var bindings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+	    var scope = $rootScope.$new();
+	    return angular.extend(scope, bindings);
+	  }
+
+	  function createWithScope(markup, scope) {
+	    var $el = $compile(angular.element(markup))(scope);
+	    $rootScope.$digest();
+	    return $el;
+	  }
+
+	  function createWithBindings(markup, bindings) {
+	    var scope = createScope(bindings);
+	    var $el = createWithScope(markup, scope);
+	    return { $el: $el, scope: scope };
+	  }
+
+	  function create(markup) {
+	    return createWithScope(markup, createScope());
+	  }
+
+	  return {
+	    digest: digest,
+	    createScope: createScope,
+	    createWithScope: createWithScope,
+	    createWithBindings: createWithBindings,
+	    create: create
+	  };
+	};
+
+/***/ },
+/* 4 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -270,9 +324,16 @@ module.exports =
 	  return initAll([moduleUnderTestName], nullMocks, customMocks);
 	};
 
+	var initWithKarmaTemplates = function initWithKarmaTemplates(moduleUnderTestName) {
+	  var nullMocks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+	  var customMocks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+	  return initAll([moduleUnderTestName, 'karmaTemplates'], nullMocks, customMocks);
+	};
+
 	exports.default = {
 	  initAll: initAll,
-	  init: init
+	  init: init,
+	  initWithKarmaTemplates: initWithKarmaTemplates
 	};
 
 /***/ }

docs/dng-component.md

@@ -0,0 +1,6 @@
+dngComponent
+==============
+
+I'll add better documentation in the future, but at least wanted to have this file as a placeholder.
+Check out the [source](../src/dng-component.js) and the super basic test at the end of the
+[test file](../test/dng-test-utils_test.js).

package.json

@@ -1,18 +1,14 @@
 {
   "name": "dng-test-utils",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Angular Test Utilities",
   "main": "dist/dng-test-utils.js",
   "scripts": {
     "test": "karma start",
     "build": "webpack",
     "prepublish": "npm run build"
   },
-  "keywords": [
-    "Angular",
-    "Unit-Test",
-    "Karma"
-  ],
+  "keywords": ["Angular", "Unit-Test", "Karma"],
   "author": "dougflip <douglasdifilippo@gmail.com>",
   "license": "MIT",
   "devDependencies": {

src/dng-component.js

@@ -0,0 +1,36 @@
+const angular = window.angular;
+
+export default ($rootScope, $compile) => {
+  function digest(fn) {
+    fn();
+    $rootScope.$digest();
+  }
+
+  function createScope(bindings = {}) {
+    const scope = $rootScope.$new();
+    return angular.extend(scope, bindings);
+  }
+
+  function createWithScope(markup, scope) {
+    const $el = $compile(angular.element(markup))(scope);
+    $rootScope.$digest();
+    const isolateScope = $el.isolateScope();
+    return { $el, scope, isolateScope };
+  }
+
+  function createWithBindings(markup, bindings) {
+    return createWithScope(markup, createScope(bindings));
+  }
+
+  function create(markup) {
+    return createWithScope(markup, createScope());
+  }
+
+  return {
+    digest,
+    createScope,
+    createWithScope,
+    createWithBindings,
+    create,
+  };
+};

src/dng-module.js

@@ -16,11 +16,19 @@ const ngMock = window.angular.mock;
  * without the need to inject `dngMocks` everywhere.
  */
 const createDngMocks = (nullMocks, customMocks) => $injector => {
-  return angular.extend({},
+  return angular.extend(
+    {},
     customMocks,
-    nullMocks.reduce((acc, x) => angular.extend({
-      [x]: $injector.get(x)
-    }, acc), {})
+    nullMocks.reduce(
+      (acc, x) =>
+        angular.extend(
+          {
+            [x]: $injector.get(x),
+          },
+          acc
+        ),
+      {}
+    )
   );
 };
 
@@ -32,7 +40,8 @@ const createDngMocks = (nullMocks, customMocks) => $injector => {
  * NOTE: You should use this OR register dngTestUtils by hand.
  */
 const createTestModule = (deps, nullMocks = [], customMocks = {}) => {
-  return angular.module('dngTestUtils.module', deps.concat('dngTestUtils'))
+  return angular
+    .module('dngTestUtils.module', deps.concat('dngTestUtils'))
     .factory('dngMocks', createDngMocks(nullMocks, customMocks));
 };
 
@@ -50,20 +59,24 @@ const registerAll = (deps, nullMocks, customMocks = {}) => {
   ngMock.module(testMod.name);
 
   // register customMocks (those that aren't nullMocked but need to exist)
-  ngMock.module(customMocks)
-}
+  ngMock.module(customMocks);
+};
 
 /**
  * Convenience wrapper over `register` to return it as a function.
  * This is nice when using in `beforeEach` calls that expect a function.
  */
-const initAll = (deps, nullMocks = [], customMocks = {}) =>
-  () => registerAll(deps, nullMocks, customMocks);
+const initAll = (deps, nullMocks = [], customMocks = {}) => () =>
+  registerAll(deps, nullMocks, customMocks);
 
 const init = (moduleUnderTestName, nullMocks = [], customMocks = {}) =>
   initAll([moduleUnderTestName], nullMocks, customMocks);
 
+const initWithKarmaTemplates = (moduleUnderTestName, nullMocks = [], customMocks = {}) =>
+  initAll([moduleUnderTestName, 'karmaTemplates'], nullMocks, customMocks);
+
 export default {
   initAll,
-  init
-}
+  init,
+  initWithKarmaTemplates,
+};

src/dng-test-utils.js

@@ -1,16 +1,20 @@
-import nullMock from "./dng-null-mock";
-import promiseGenerator from "./dng-defer";
+import nullMock from './dng-null-mock';
+import promiseGenerator from './dng-defer';
+import dngComponent from './dng-component';
 import dngModule from './dng-module';
 
 // FIXME: Is there any way around this?
 const ng = window.angular;
 
-const dngTestModule = ng.module('dngTestUtils', [])
+const dngTestModule = ng
+  .module('dngTestUtils', [])
   .factory('dngDefer', promiseGenerator)
+  .factory('dngComponent', dngComponent)
   .factory('dngNullMock', () => nullMock);
 
 export default {
   name: dngTestModule.name,
   nullMock: nullMock,
-  init: dngModule.init
-}
+  init: dngModule.init,
+  initWithKarmaTemplates: dngModule.initWithKarmaTemplates,
+};

test/dng-test-utils_test.js

@@ -22,7 +22,7 @@ describe('DngTestUtils', () => {
    * This is essentially forwarded to angular.mock.module
    */
   const customMocks = {
-    customDependency: jasmine.createSpyObj('localDep', ['methodName'])
+    customDependency: jasmine.createSpyObj('localDep', ['methodName']),
   };
 
   /**
@@ -34,9 +34,11 @@ describe('DngTestUtils', () => {
    * You probably won't need to do module stuff anymore
    * But this is here just to ensure it works in case it is needed.
    */
-  beforeEach(ngMock.module($provide => {
-    // just making sure this is available if needed...
-  }));
+  beforeEach(
+    ngMock.module($provide => {
+      // just making sure this is available if needed...
+    })
+  );
 
   /**
    * The call to `dngTestUtils.init` creates a new injectable named `dngMocks`.
@@ -45,7 +47,7 @@ describe('DngTestUtils', () => {
    * in the specific places where you need it.
    * We'll alias in this example.
    */
-  beforeEach(ngMock.inject(dngMocks => sutMocks = dngMocks));
+  beforeEach(ngMock.inject(dngMocks => (sutMocks = dngMocks)));
 
   /**
    * Verify that `dngMocks` (aliased to sutMocks in this test) has BOTH null mocks
@@ -65,9 +67,11 @@ describe('DngTestUtils', () => {
     describe('defer', () => {
       let deferred;
 
-      beforeEach(ngMock.inject(dngDefer => {
-        deferred = dngDefer.defer();
-      }));
+      beforeEach(
+        ngMock.inject(dngDefer => {
+          deferred = dngDefer.defer();
+        })
+      );
 
       it('should create a deferred which can be resolved', done => {
         deferred.promise.then(x => {
@@ -89,9 +93,11 @@ describe('DngTestUtils', () => {
     describe('deferSpy', () => {
       let promiseToSquare;
 
-      beforeEach(ngMock.inject(dngDefer => {
-        promiseToSquare = dngDefer.deferSpy(sutMocks.promiseMath.promiseToSquare);
-      }));
+      beforeEach(
+        ngMock.inject(dngDefer => {
+          promiseToSquare = dngDefer.deferSpy(sutMocks.promiseMath.promiseToSquare);
+        })
+      );
 
       it('should create a deferred which can be resolved', done => {
         sutMocks.promiseMath.promiseToSquare().then(x => {
@@ -114,10 +120,12 @@ describe('DngTestUtils', () => {
       let modalSpy;
       let modalDeferred;
 
-      beforeEach(ngMock.inject(dngDefer => {
-        modalSpy = jasmine.createSpyObj('modalSpy', ['open']);
-        modalDeferred = dngDefer.deferSpyWithResult(modalSpy.open);
-      }));
+      beforeEach(
+        ngMock.inject(dngDefer => {
+          modalSpy = jasmine.createSpyObj('modalSpy', ['open']);
+          modalDeferred = dngDefer.deferSpyWithResult(modalSpy.open);
+        })
+      );
 
       it('should create a deferred under a "result" property which can be resolved', done => {
         modalSpy.open().result.then(x => {
@@ -136,4 +144,34 @@ describe('DngTestUtils', () => {
       });
     });
   });
+
+  /**
+   * Very basic example of creating a component with bindings in order to inspect the HTML.
+   * I'll add more eventually, but wanted at least something basic to get this out.
+   * See [dng-component](../src/dng-component) for the full API
+   */
+  describe('dngComponent', () => {
+    let $el;
+    let scope;
+    let isolateScope;
+    let digest;
+
+    beforeEach(
+      ngMock.inject(dngComponent => {
+        digest = dngComponent.digest;
+        const bindings = { name: 'World' };
+        const markup = `<say-hello name="name"></say-hello>`;
+        ({ $el, scope, isolateScope } = dngComponent.createWithBindings(markup, bindings));
+      })
+    );
+
+    it('should properly create the component', () => {
+      expect($el.text()).toContain('Hello World!');
+    });
+
+    it('should provide a digest helper to test updates', () => {
+      digest(() => (scope.name = 'Angular'));
+      expect($el.text()).toContain('Hello Angular!');
+    });
+  });
 });