feat: replace template paths with contents

We replace the `templateUrl` fields with `template` fields and thus
switch from template paths to template contents in preparation for the
Webpack PR.

Changelog-Entry: Replace template paths with template contents.
Change-Type: patch

lib/gui/app/app.js

@@ -26,6 +26,14 @@ var angular = require('angular')
 
 /* eslint-enable no-var */
 
+// Temporary: will be taken care of Webpack automatically soon
+// eslint-disable-next-line node/no-deprecated-api
+require.extensions['.html'] = (module, filename) => {
+  module.exports = require('fs').readFileSync(filename, {
+    encoding: 'utf8'
+  })
+}
+
 const electron = require('electron')
 const Bluebird = require('bluebird')
 const semver = require('semver')

lib/gui/app/components/drive-selector/services/drive-selector.js

@@ -35,7 +35,7 @@ module.exports = function (ModalService, $q) {
   this.open = () => {
     modal = ModalService.open({
       name: 'drive-selector',
-      template: './components/drive-selector/templates/drive-selector-modal.tpl.html',
+      template: require('../templates/drive-selector-modal.tpl.html'),
       controller: 'DriveSelectorController as modal',
       size: 'drive-selector-modal'
     })

lib/gui/app/components/modal/services/modal.js

@@ -26,7 +26,7 @@ module.exports = function ($uibModal, $q) {
    * @public
    *
    * @param {Object} options - options
-   * @param {String} options.template - template path
+   * @param {String} options.template - template contents
    * @param {String} options.controller - controller
    * @param {String} [options.size='sm'] - modal size
    * @param {Object} options.resolve - modal resolves
@@ -35,7 +35,7 @@ module.exports = function ($uibModal, $q) {
    * @example
    * ModalService.open({
    *   name: 'my modal',
-   *   template: './path/to/modal.tpl.html',
+   *   template: require('./path/to/modal.tpl.html'),
    *   controller: 'DriveSelectorController as modal',
    * });
    */
@@ -50,7 +50,7 @@ module.exports = function ($uibModal, $q) {
 
     const modal = $uibModal.open({
       animation: true,
-      templateUrl: options.template,
+      template: options.template,
       controller: options.controller,
       size: options.size,
       resolve: options.resolve

lib/gui/app/components/progress-button/directives/progress-button.js

@@ -32,7 +32,7 @@
  */
 module.exports = () => {
   return {
-    templateUrl: './components/progress-button/templates/progress-button.tpl.html',
+    template: require('../templates/progress-button.tpl.html'),
     restrict: 'E',
     replace: true,
     transclude: true,

lib/gui/app/components/tooltip-modal/services/tooltip-modal.js

@@ -38,7 +38,7 @@ module.exports = function (ModalService) {
   this.show = (options) => {
     return ModalService.open({
       name: 'tooltip',
-      template: './components/tooltip-modal/templates/tooltip-modal.tpl.html',
+      template: require('../templates/tooltip-modal.tpl.html'),
       controller: 'TooltipModalController as modal',
       size: 'tooltip-modal',
       resolve: {

lib/gui/app/components/warning-modal/services/warning-modal.js

@@ -41,7 +41,7 @@ module.exports = function ($sce, ModalService) {
     options.description = $sce.trustAsHtml(options.description)
     return ModalService.open({
       name: 'warning',
-      template: './components/warning-modal/templates/warning-modal.tpl.html',
+      template: require('../templates/warning-modal.tpl.html'),
       controller: 'WarningModalController as modal',
       size: 'warning-modal',
       resolve: {

lib/gui/app/pages/finish/finish.js

@@ -39,7 +39,7 @@ FinishPage.config(($stateProvider) => {
     .state('success', {
       url: '/success',
       controller: 'FinishController as finish',
-      templateUrl: './pages/finish/templates/success.tpl.html'
+      template: require('./templates/success.tpl.html')
     })
 })
 

lib/gui/app/pages/main/main.js

@@ -55,7 +55,7 @@ MainPage.config(($stateProvider) => {
     .state('main', {
       url: '/main',
       controller: 'MainController as main',
-      templateUrl: './pages/main/templates/main.tpl.html'
+      template: require('./templates/main.tpl.html')
     })
 })
 

lib/gui/app/pages/settings/settings.js

@@ -34,7 +34,7 @@ SettingsPage.config(($stateProvider) => {
     .state('settings', {
       url: '/settings',
       controller: 'SettingsController as settings',
-      templateUrl: './pages/settings/templates/settings.tpl.html'
+      template: require('./templates/settings.tpl.html')
     })
 })
 

tests/gui/pages/main.spec.js

@@ -18,6 +18,7 @@
 
 const m = require('mochainon')
 const _ = require('lodash')
+const fs = require('fs')
 const path = require('path')
 const supportedFormats = require('../../../lib/shared/supported-formats')
 const angular = require('angular')
@@ -26,6 +27,14 @@ const availableDrives = require('../../../lib/shared/models/available-drives')
 const selectionState = require('../../../lib/shared/models/selection-state')
 require('angular-mocks')
 
+// Mock HTML requires by reading from the file-system
+// eslint-disable-next-line node/no-deprecated-api
+require.extensions['.html'] = (module, filename) => {
+  module.exports = fs.readFileSync(filename, {
+    encoding: 'utf8'
+  })
+}
+
 describe('Browser: MainPage', function () {
   beforeEach(angular.mock.module(
     require('../../../lib/gui/app/pages/main/main')
@@ -241,4 +250,22 @@ describe('Browser: MainPage', function () {
       })
     })
   })
+
+  describe('page template', function () {
+    let $state
+
+    beforeEach(angular.mock.inject(function (_$state_) {
+      $state = _$state_
+    }))
+
+    it('should match the file contents', function () {
+      const {
+        template
+      } = $state.get('main')
+      const contents = fs.readFileSync('lib/gui/app/pages/main/templates/main.tpl.html', {
+        encoding: 'utf-8'
+      })
+      m.chai.expect(template).to.equal(contents)
+    })
+  })
 })