introduce a buildComponent test helper

.eslintrc

@@ -144,7 +144,7 @@
     "indent": [2, 2, {"SwitchCase": 1}],
     "jsx-quotes": 2,
     "key-spacing": 2,
-    "lines-around-comment": 2,
+    "lines-around-comment": 0,
     "linebreak-style": 2,
     "max-nested-callbacks": 2,
     "new-cap": 2,

Gruntfile.js

@@ -39,7 +39,9 @@ module.exports = function(grunt) {
         src: 'coverage/lcov.json',
         options: {
           reports: {
-            lcovonly: 'coverage/lcov-remapped.info'
+            'lcovonly': 'coverage/lcov-remapped.info',
+            'text-summary': null,
+            'html': 'coverage/html'
           }
         }
       }

karma.conf.js

@@ -47,8 +47,6 @@ module.exports = function(config) {
         dir: 'coverage/',
         subdir: '.',
         file: 'lcov.json'
-      }, {
-        type: 'text-summary'
       }]
     },
 

src/anglue.js

@@ -6,3 +6,4 @@ export * from './actions';
 export * from './component';
 export * from './store';
 export * from './behaviors';
+export * from './test-helpers';

src/behaviors/paginatable-component.spec.js

@@ -1,7 +1,6 @@
-/*eslint-env node, jasmine*//*global module, inject*/
+/*eslint-env node, jasmine*//*global module*/
 /*eslint-disable max-statements, max-params*/
-import angular from 'angular';
-import 'angular-mocks';
+import {buildComponent} from 'anglue/anglue';
 
 import {
   Annotations,
@@ -144,8 +143,7 @@ describe('PaginatableComponent', () => {
     };
 
     @Component()
-    @PaginatableComponent()
-    class PaginatableTestComponent {
+    @PaginatableComponent() class PaginatableTestComponent {
       paginatableActions = mockActions;
       paginatableStore = mockStore;
     }
@@ -155,8 +153,7 @@ describe('PaginatableComponent', () => {
       entity: 'foo',
       initialPage: 3,
       initialLimit: 100
-    })
-    class PaginatableEntityConfiguredComponent {
+    }) class PaginatableEntityConfiguredComponent {
       fooActions = mockActions;
       fooStore = mockStore;
     }
@@ -165,91 +162,57 @@ describe('PaginatableComponent', () => {
     @PaginatableComponent({
       actions: 'customActions',
       store: 'customStore'
-    })
-    class PaginatableCustomConfiguredComponent {
+    }) class PaginatableCustomConfiguredComponent {
       customActions = mockActions;
       customStore = mockStore;
     }
 
     @Component()
-    @PaginatableComponent('foo')
-    class PaginatableStringConfiguredComponent {
+    @PaginatableComponent('foo') class PaginatableStringConfiguredComponent {
       fooActions = mockActions;
       fooStore = mockStore;
     }
 
-    angular.module('paginatableComponents', [
-      PaginatableTestComponent.annotation.module.name,
-      PaginatableEntityConfiguredComponent.annotation.module.name,
-      PaginatableCustomConfiguredComponent.annotation.module.name,
-      PaginatableStringConfiguredComponent.annotation.module.name
-    ]);
-
-    let $compile, $rootScope;
-    let autoConfiguredComponent;
-    let entityConfiguredComponent;
-    let customConfiguredComponent;
-    let stringConfiguredComponent;
-
-    beforeEach(module('paginatableComponents'));
-    beforeEach(inject((_$compile_, _$rootScope_) => {
-      $compile = _$compile_;
-      $rootScope = _$rootScope_;
-
-      autoConfiguredComponent = compileTemplate(
-        '<paginatable-test></paginatable-test>', $compile, $rootScope)
-        .controller('paginatableTest');
-      entityConfiguredComponent = compileTemplate(
-        '<paginatable-entity-configured></paginatable-entity-configured>', $compile, $rootScope)
-        .controller('paginatableEntityConfigured');
-      customConfiguredComponent = compileTemplate(
-        '<paginatable-custom-configured></paginatable-custom-configured>', $compile, $rootScope)
-        .controller('paginatableCustomConfigured');
-      stringConfiguredComponent = compileTemplate(
-        '<paginatable-string-configured></paginatable-string-configured>', $compile, $rootScope)
-        .controller('paginatableStringConfigured');
-    }));
-
     it('should define the PaginatableComponent API on the component', () => {
+      const autoConfiguredComponent = buildComponent(PaginatableTestComponent);
       [
         'pagination'
       ].forEach(api => expect(autoConfiguredComponent[api]).toBeDefined());
     });
 
     it('should have an instance of PaginatableComponentBehavior as the behavior property', () => {
+      const autoConfiguredComponent = buildComponent(PaginatableTestComponent);
       expect(autoConfiguredComponent.pagination).toEqual(jasmine.any(PaginatableComponentBehavior));
     });
 
     it('should use the first uppercased part of class name to determine the actions and store', () => {
+      const autoConfiguredComponent = buildComponent(PaginatableTestComponent);
       expect(autoConfiguredComponent.pagination.actions).toEqual('paginatableActions');
       expect(autoConfiguredComponent.pagination.store).toEqual('paginatableStore');
     });
 
     it('should be possible to pass the entity property as a string to determine actions and store', () => {
+      const stringConfiguredComponent = buildComponent(PaginatableStringConfiguredComponent);
       expect(stringConfiguredComponent.pagination.actions).toEqual('fooActions');
       expect(stringConfiguredComponent.pagination.store).toEqual('fooStore');
     });
 
     it('should be possible to configure an entity to determine the actions and store', () => {
+      const entityConfiguredComponent = buildComponent(PaginatableEntityConfiguredComponent);
       expect(entityConfiguredComponent.pagination.actions).toEqual('fooActions');
       expect(entityConfiguredComponent.pagination.store).toEqual('fooStore');
     });
 
     it('should be possible to pass the actions and store in the configuration', () => {
+      const customConfiguredComponent = buildComponent(PaginatableCustomConfiguredComponent);
       expect(customConfiguredComponent.pagination.actions).toEqual('customActions');
       expect(customConfiguredComponent.pagination.store).toEqual('customStore');
     });
 
     it('should be possible to configure initial page and limit', () => {
+      const entityConfiguredComponent = buildComponent(PaginatableEntityConfiguredComponent);
       expect(entityConfiguredComponent.pagination.config.initialPage).toEqual(3);
       expect(entityConfiguredComponent.pagination.config.initialLimit).toEqual(100);
     });
   });
 });
-
-function compileTemplate(template, $compile, $rootScope) {
-  const el = angular.element(template.trim());
-  $compile(el)($rootScope.$new());
-  $rootScope.$digest();
-  return el;
-}

src/test-helpers.js

@@ -0,0 +1,38 @@
+import angular from 'angular';
+import 'angular-mocks';
+import {camelCaseToDashes, dashesToCamelCase} from './utils';
+
+let counter = 0;
+
+export function buildComponent(ComponentClass) {
+  if (!ComponentClass.annotation || !ComponentClass.annotation.module || !ComponentClass.annotation.module.name) {
+    throw new Error(`ComponentClass is not annotated: ${ComponentClass.name}`);
+  }
+
+  const tagName = camelCaseToDashes(ComponentClass.annotation.name).toLowerCase();
+  const template = `<${tagName}></${tagName}>`;
+  const elProperty = dashesToCamelCase(tagName);
+
+  counter += 1;
+  const componentName = `TestedComponents${counter}`;
+
+  angular.module(componentName, [ComponentClass.annotation.module.name]);
+
+  let controller = null;
+
+  angular.mock.module(componentName);
+  angular.mock.inject((_$compile_, _$rootScope_) => {
+    const compiledTemplate = compileTemplate(template, _$compile_, _$rootScope_);
+    controller = compiledTemplate.controller(elProperty);
+    controller._element = compiledTemplate;
+  });
+
+  return controller;
+}
+
+function compileTemplate(template, $compile, $rootScope) {
+  const el = angular.element(template.trim());
+  $compile(el)($rootScope.$new());
+  $rootScope.$digest();
+  return el;
+}

src/test-helpers.spec.js

@@ -0,0 +1,16 @@
+/*eslint-env node, jasmine*/
+import {buildComponent} from 'anglue/anglue';
+
+describe('Test helpers', () => {
+  describe('buildComponent', () => {
+
+    class Generic {}
+
+    it('should throw an error when called with a class without annotation', () => {
+      expect(() => {
+        buildComponent(Generic);
+      }).toThrow(new Error('ComponentClass is not annotated: Generic'));
+    });
+
+  });
+});

src/utils.js

@@ -144,3 +144,11 @@ export function getCurrentDescriptorValue(propertyDescriptor) {
 export function camelcase(name) {
   return `${name[0].toUpperCase()}${name.slice(1)}`;
 }
+
+export function camelCaseToDashes (name) {
+  return name.replace(/([a-z])([A-Z])/g, '$1-$2');
+}
+
+export function dashesToCamelCase (name) {
+  return String(name).replace(/-([a-z])/g, part => part[1].toUpperCase());
+}