Extract factory for generating template URLs

awx/ui/static/js/app.js

@@ -38,6 +38,7 @@ import mainMenu from 'tower/main-menu/main';
 import browserData from 'tower/browser-data/main';
 import dashboard from 'tower/dashboard/main';
 import moment from 'tower/shared/moment/main';
+import templateUrl from 'tower/shared/template-url/main';
 
 import {JobDetailController} from 'tower/controllers/JobDetail';
 import {JobStdoutController} from 'tower/controllers/JobStdout';
@@ -84,6 +85,7 @@ var tower = angular.module('Tower', [
     mainMenu.name,
     dashboard.name,
     moment.name,
+    templateUrl.name,
     'AuthService',
     'Utilities',
     'LicenseHelper',

awx/ui/static/js/dashboard/counts/dashboard-counts.directive.js

@@ -1,14 +1,14 @@
 /* jshint unused: vars */
 export default
-    [   '$rootScope',
+    [   'templateUrl',
-        function() {
+        function(templateUrl) {
             return {
                 restrict: 'E',
                 scope: {
                     data: '='
                 },
                 replace: false,
-                templateUrl: '/static/js/dashboard/counts/dashboard-counts.partial.html',
+                templateUrl: templateUrl('dashboard/counts/dashboard-counts'),
                 link: function(scope, element, attrs) {
                     scope.$watch("data", function(data) {
                         if (data && data.hosts) {

awx/ui/static/js/dashboard/dashboard.directive.js

@@ -1,11 +1,11 @@
 /* jshint unused: vars */
 export default
-    [   '$rootScope',
+    [   'templateUrl',
-        function() {
+        function(templateUrl) {
             return {
                 restrict: 'E',
                 scope: true,
-                templateUrl: '/static/js/dashboard/dashboard.partial.html',
+                templateUrl: templateUrl('dashboard/dashboard'),
                 link: function(scope, element, attrs) {
                 }
             };

awx/ui/static/js/dashboard/graphs/dashboard-graphs.directive.js

@@ -1,11 +1,11 @@
 /* jshint unused: vars */
 export default
-    [   '$rootScope',
+    [   'templateUrl',
-        function() {
+        function(templateUrl) {
             return {
                 restrict: 'E',
                 scope: true,
-                templateUrl: '/static/js/dashboard/graphs/dashboard-graphs.partial.html',
+                templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'),
                 link: function(scope, element, attrs) {
                     function clearGraphs() {
                         scope.jobStatusSelected = false;

awx/ui/static/js/dashboard/graphs/host-status/host-status-graph.directive.js

@@ -8,14 +8,15 @@
     [   '$compile',
         '$window',
         'adjustGraphSize',
+        'templateUrl',
         HostStatusGraph,
     ];
 
-function HostStatusGraph($compile, $window, adjustGraphSize) {
+function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
         return {
             restrict: 'E',
             link: link,
-            templateUrl: '/static/js/dashboard/graphs/host-status/host_status_graph.partial.html'
+            templateUrl: templateUrl('dashboard/graphs/host-status/host_status_graph')
         };
 
         function link(scope, element, attr) {

awx/ui/static/js/dashboard/graphs/job-status/job-status-graph.directive.js

@@ -12,16 +12,17 @@
         'Wait',
         'adjustGraphSize',
         'jobStatusGraphData',
+        'templateUrl',
         JobStatusGraph
     ];
 
-function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustGraphSize, graphDataService) {
+function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustGraphSize, graphDataService, templateUrl) {
             return {
                 restrict: 'E',
                 scope: {
                     data: '='
                 },
-                templateUrl: '/static/js/dashboard/graphs/job-status/job_status_graph.partial.html',
+                templateUrl: templateUrl('dashboard/graphs/job-status/job_status_graph'),
                 link: link
             };
 

awx/ui/static/js/dashboard/graphs/job-status/main.js

@@ -1,8 +1,8 @@
 import JobStatusGraphDirective from 'tower/dashboard/graphs/job-status/job-status-graph.directive';
 import JobStatusGraphService from 'tower/dashboard/graphs/job-status/job-status-graph.service';
 import DashboardGraphHelpers from 'tower/dashboard/graphs/graph-helpers/main';
-import ApiLoader from 'tower/shared/api-loader';
+import templateUrl from 'tower/shared/template-url/main';
 
-export default angular.module('JobStatusGraph', [DashboardGraphHelpers.name, ApiLoader.name])
+export default angular.module('JobStatusGraph', [DashboardGraphHelpers.name, templateUrl.name])
     .directive('jobStatusGraph', JobStatusGraphDirective)
     .service('jobStatusGraphData', JobStatusGraphService);

awx/ui/static/js/dashboard/lists/job-templates/job-templates-list.directive.js

@@ -1,14 +1,15 @@
 /* jshint unused: vars */
 export default
     [   "PlaybookRun",
-        function JobTemplatesList(PlaybookRun) {
+        'templateUrl',
+        function JobTemplatesList(PlaybookRun, templateUrl) {
             return {
                 restrict: 'E',
                 link: link,
                 scope: {
                     data: '='
                 },
-                templateUrl: '/static/js/dashboard/lists/job-templates/job-templates-list.partial.html'
+                templateUrl: templateUrl('dashboard/lists/job-templates/job-templates-list')
             };
 
             function link(scope, element, attr) {

awx/ui/static/js/dashboard/lists/jobs/jobs-list.directive.js

@@ -1,14 +1,15 @@
 /* jshint unused: vars */
 export default
-    ['moment',
+    [   'moment',
-    function JobsList(moment) {
+        'templateUrl',
+        function JobsList(moment, templateUrl) {
         return {
             restrict: 'E',
             link: link,
             scope: {
                 data: '='
             },
-        templateUrl: '/static/js/dashboard/lists/jobs/jobs-list.partial.html'
+            templateUrl: templateUrl('dashboard/lists/jobs/jobs-list')
         };
 
         function link(scope, element, attr) {

awx/ui/static/js/main-menu/default-menu.directive.js

@@ -1,7 +1,9 @@
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
             return {
                 restrict: 'E',
-        templateUrl: '/static/js/main-menu/menu-default.partial.html',
+                templateUrl: templateUrl('main-menu/menu-default'),
                 link: function(scope, element) {
                     var contents = element.contents();
                     contents.unwrap();
@@ -12,4 +14,5 @@ export default function() {
                     });
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/main-menu/main-menu.directive.js

@@ -1,10 +1,12 @@
 /* jshint unused: vars */
 
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
             return {
                 restrict: 'E',
                 controllerAs: 'mainMenu',
-        templateUrl: '/static/js/main-menu/main-menu.partial.html',
+                templateUrl: templateUrl('main-menu/main-menu'),
                 controller: ['$scope', function($scope) {
                     this.open = function() {
                         $scope.isOpen = true;
@@ -42,4 +44,5 @@ export default function() {
                     });
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/main-menu/menu-toggle.directive.js

@@ -1,8 +1,10 @@
 /* jshint unused: vars */
 
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
             return {
-        templateUrl: '/static/js/main-menu/menu-toggle.partial.html',
+                templateUrl: templateUrl('main-menu/menu-toggle'),
                 restrict: 'E',
                 require: '^^mainMenu',
                 scope: {
@@ -24,4 +26,5 @@ export default function() {
                     });
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/main-menu/portal-menu.directive.js

@@ -1,7 +1,9 @@
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
             return {
                 restrict: 'E',
-        templateUrl: '/static/js/main-menu/menu-portal.partial.html',
+                templateUrl: templateUrl('main-menu/menu-portal'),
                 link: function(scope, element) {
                     var contents = element.contents();
                     contents.unwrap();
@@ -12,4 +14,5 @@ export default function() {
                     });
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/main-menu/web-socket-status.directive.js

@@ -1,9 +1,12 @@
 /* jshint unused: vars */
 
-export default ['$rootScope', function($rootScope) {
+export default
+    [   '$rootScope',
+        'templateUrl',
+        function($rootScope, templateUrl) {
             return {
                 restrict: 'E',
-        templateUrl: '/static/js/main-menu/web-socket-status.partial.html',
+                templateUrl: templateUrl('main-menu/web-socket-status'),
                 link: function(scope, element, attrs) {
                     scope.socketHelp = $rootScope.socketHelp;
                     scope.socketTip = $rootScope.socketTip;
@@ -15,4 +18,5 @@ export default ['$rootScope', function($rootScope) {
                     });
                 }
             };
-}];
+        }
+    ];

awx/ui/static/js/shared/breadcrumbs/breadcrumbs.directive.js

@@ -9,13 +9,15 @@
 import controller from './breadcrumbs.controller';
 import 'tower/shared/generator-helpers';
 
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
 
             return {
                 restrict: 'E',
                 controller: controller,
                 transclude: true,
-        templateUrl: '/static/js/shared/breadcrumbs/breadcrumbs.partial.html',
+                templateUrl: templateUrl('shared/breadcrumbs/breadcrumbs'),
                 scope: {
                 },
                 link: function(scope, element, attrs, controller) {
@@ -35,4 +37,5 @@ export default function() {
                     });
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/shared/icon/icon.directive.js

@@ -1,7 +1,9 @@
-export default function() {
+export default
+    [   'templateUrl',
+        function(templateUrl) {
             return {
                 restrict: 'E',
-        templateUrl: '/static/js/shared/icon/icon.partial.html',
+                templateUrl: templateUrl('shared/icon/icon'),
                 scope: {
                 },
                 link: function(scope, element, attrs) {
@@ -26,4 +28,5 @@ export default function() {
 
                 }
             };
-}
+        }
+    ];

awx/ui/static/js/shared/multi-select-list/main.js

@@ -7,9 +7,10 @@
 import multiSelect from './multi-select-list.directive';
 import selectAll from './select-all.directive';
 import selectListItem from './select-list-item.directive';
+import templateUrl from 'tower/shared/template-url/main';
 
 export default
-    angular.module('multiSelectList', [])
+    angular.module('multiSelectList', [templateUrl.name])
         .directive('multiSelectList', multiSelect)
         .directive('selectAll', selectAll)
         .directive('selectListItem', selectListItem);

awx/ui/static/js/shared/multi-select-list/select-all.directive.js

@@ -129,12 +129,10 @@
 //      // =>
 //      '/static/js/shared/multi-select-list/select-all.html
 //
-function template(base) {
-    return '/static/js/' + base + '.partial.html';
-}
 
 export default
-    [   function() {
+    [   'templateUrl',
+        function(templateUrl) {
         return {
             require: '^multiSelectList',
             restrict: 'E',
@@ -145,7 +143,7 @@ export default
                 extendedLabel: '&',
                 isSelectionEmpty: '=selectionsEmpty'
             },
-            templateUrl: template('shared/multi-select-list/select-all'),
+            templateUrl: templateUrl('shared/multi-select-list/select-all'),
             link: function(scope, element, attrs, controller) {
 
                 scope.label = scope.label || 'All';

awx/ui/static/js/shared/template-url/main.js

@@ -0,0 +1,6 @@
+import templateUrl from './template-url.factory';
+
+export default
+    angular.module('templateUrl', [])
+        .factory('templateUrl', templateUrl);
+

awx/ui/static/js/shared/template-url/template-url.factory.js

@@ -0,0 +1,20 @@
+function templateUrl($sce, path, isTrusted) {
+    isTrusted = isTrusted !== false; // defaults to true, can be passed in as false
+    var parts = ['', 'static', 'js'];
+    parts.push(path);
+
+    var url = parts.join('/') + '.partial.html';
+
+    if (isTrusted) {
+        url = $sce.trustAsResourceUrl(url);
+    }
+
+    return url;
+}
+
+export default
+    [   '$sce',
+        function($sce) {
+            return _.partial(templateUrl, $sce);
+        }
+    ];

awx/ui/static/js/system-tracking/date-picker/date-picker.directive.js

@@ -8,7 +8,8 @@
 
 export default
     [   'moment',
-        function(moment) {
+        'templateUrl',
+        function(moment, templateUrl) {
             return {
                 restrict: 'E',
                 scope: {
@@ -17,7 +18,7 @@ export default
                     autoUpdate: '=?',
                     inputClass: '&'
                 },
-                templateUrl: '/static/js/system-tracking/date-picker/date-picker.partial.html',
+                templateUrl: templateUrl('system-tracking/date-picker/date-picker'),
                 link: function(scope, element, attrs) {
 
                     // We need to make sure this _never_ recurses, which sometimes happens

awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.directive.js

@@ -1,9 +1,10 @@
 /* jshint unused: vars */
 
 export default
-    [   function() {
+    [   'templateUrl',
+        function(templateUrl) {
             return  {   restrict: 'E',
-                        templateUrl: '/static/js/system-tracking/fact-data-table/fact-data-table.partial.html',
+                        templateUrl: templateUrl('system-tracking/fact-data-table/fact-data-table'),
                         scope:
                             {   leftHostname: '=',
                                 rightHostname: '=',

awx/ui/tests/unit/setup-browser.js

@@ -0,0 +1,39 @@
+var jsdom = require('jsdom').jsdom;
+var document = jsdom('tower');
+var window = document.parentWindow;
+var mocha = require('mocha');
+window.mocha = mocha;
+window.beforeEach = beforeEach;
+window.afterEach = afterEach;
+
+global.document = document;
+global.window = window;
+
+require('angular/angular');
+var jquery = require('jquery');
+require('angular-mocks/angular-mocks');
+
+var chai = require('chai');
+var expect = chai.expect;
+var sinonChai = require('sinon-chai');
+var chaiAsPromised = require('chai-as-promised');
+var sinon = require('sinon');
+var chaiThings = require('chai-things');
+
+chai.use(sinonChai);
+chai.use(chaiAsPromised);
+chai.use(chaiThings);
+
+global.$ = window.$ = jquery;
+global.angular = window.angular;
+global.expect = chai.expect;
+
+angular.module('templates', []);
+require('../../templates');
+
+var lodash = require('lodash');
+global._ = lodash;
+
+var LocalStorage = require('node-localstorage').LocalStorage;
+global.localStorage = window.localStorage = new LocalStorage('./scratch');
+