directiveTemplateSpec.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /* global describe global it global beforeEach global angular global inject global expect */
  2. 'use strict';
  3. describe('directiveTemplate', function () {
  4. createDirectives();
  5. var toaster, scope, $compile;
  6. beforeEach(function () {
  7. // load dependencies
  8. module('testApp');
  9. module('toaster')
  10. // inject the toaster service
  11. inject(function (_toaster_, _$rootScope_, _$compile_) {
  12. toaster = _toaster_;
  13. scope = _$rootScope_;
  14. $compile = _$compile_;
  15. });
  16. });
  17. it('should load and render the referenced directive template text', function () {
  18. var container = compileContainer();
  19. pop({ type: 'info', body: 'bind-template-only', bodyOutputType: 'directive' });
  20. expect(container[0].innerText).toBe('here is some great new text! It was brought in via directive!');
  21. });
  22. it('should bind directiveData to the directive template', function () {
  23. var container = compileContainer();
  24. pop({ type: 'info', body: 'bind-template-with-data', bodyOutputType: 'directive', directiveData: { name: 'Bob' } });
  25. expect(container[0].innerText).toBe('Hello Bob');
  26. });
  27. it('should parse type string directiveData to an object', function () {
  28. var container = compileContainer();
  29. pop({ type: 'info', body: 'bind-template-with-data', bodyOutputType: 'directive', directiveData: '{ "name": "Bob" }' });
  30. expect(container[0].innerText).toBe('Hello Bob');
  31. });
  32. it('should render type number directiveData', function () {
  33. var container = compileContainer();
  34. pop({ type: 'info', body: 'bind-template-with-numeric-data', bodyOutputType: 'directive', directiveData: 2 });
  35. expect(container[0].innerText).toBe('1 + 1 = 2');
  36. });
  37. it('should bind Attribute-restricted templates', function () {
  38. var container = compileContainer();
  39. pop({ type: 'info', body: 'bind-template-only', bodyOutputType: 'directive', directiveData: { name: 'Bob' } });
  40. expect(container[0].innerText).toBe('here is some great new text! It was brought in via directive!');
  41. });
  42. it('should bind unrestricted templates', function () {
  43. var container = compileContainer();
  44. pop({ type: 'info', body: 'unrestricted-template', bodyOutputType: 'directive' });
  45. expect(container[0].innerText).toBe('Unrestricted Template');
  46. });
  47. it('should not bind Element-restricted templates', function () {
  48. var container = compileContainer();
  49. pop({ type: 'info', body: 'element-template', bodyOutputType: 'directive' });
  50. expect(container[0].innerText).toBe('');
  51. expect(container[0].innerText).not.toBe('Element Template');
  52. });
  53. it('should not bind Class-restricted templates', function () {
  54. var container = compileContainer();
  55. pop({ type: 'info', body: 'class-template', bodyOutputType: 'directive' });
  56. expect(container[0].innerText).toBe('');
  57. expect(container[0].innerText).not.toBe('Class Template');
  58. });
  59. it('should throw an error if directiveName argument is not passed via body', function () {
  60. var container = compileContainer();
  61. var hasError = false;
  62. expect(container[0].innerText).toBe('');
  63. try {
  64. pop({ type: 'info', bodyOutputType: 'directive' });
  65. } catch (e) {
  66. expect(e.message).toBe('A valid directive name must be provided via the toast body argument when using bodyOutputType: directive');
  67. hasError = true;
  68. }
  69. expect(container[0].innerText).toBe('');
  70. expect(hasError).toBe(true);
  71. });
  72. it('should throw an error if directiveName argument is an empty string', function () {
  73. var container = compileContainer();
  74. var hasError = false;
  75. expect(container[0].innerText).toBe('');
  76. try {
  77. pop({ type: 'info', body: '', bodyOutputType: 'directive' });
  78. } catch (e) {
  79. expect(e.message).toBe('A valid directive name must be provided via the toast body argument when using bodyOutputType: directive');
  80. hasError = true;
  81. }
  82. expect(container[0].innerText).toBe('');
  83. expect(hasError).toBe(true);
  84. });
  85. it('should throw an error if the directive could not be found', function () {
  86. var hasError = false;
  87. compileContainer();
  88. try {
  89. pop({ type: 'info', body: 'non-existent-directive', bodyOutputType: 'directive' });
  90. } catch (e) {
  91. expect(e.message).toBe('non-existent-directive could not be found.');
  92. hasError = true;
  93. }
  94. expect(hasError).toBe(true);
  95. });
  96. function compileContainer() {
  97. var element = angular.element('<toaster-container></toaster-container>');
  98. $compile(element)(scope);
  99. scope.$digest();
  100. return element;
  101. }
  102. function pop(params) {
  103. toaster.pop(params);
  104. // force new toast to be rendered
  105. scope.$digest();
  106. }
  107. function createDirectives() {
  108. angular.module('testApp', [])
  109. .directive('bindTemplateOnly', function () {
  110. return {
  111. restrict: 'A',
  112. template: 'here is some great new text! <span style="color:orange">It was brought in via directive!</span>'
  113. }
  114. })
  115. .directive('bindTemplateWithData', function () {
  116. return { template: 'Hello {{directiveData.name}}' }
  117. })
  118. .directive('bindTemplateWithNumericData', function () {
  119. return { template: '1 + 1 = {{directiveData}}' }
  120. })
  121. .directive('elementTemplate', function () {
  122. return { restrict: 'E', template: 'Element Template' }
  123. })
  124. .directive('classTemplate', function () {
  125. return { restrict: 'C', template: 'Class Template' }
  126. })
  127. .directive('unrestrictedTemplate', function () {
  128. return { template: 'Unrestricted Template' }
  129. });
  130. }
  131. })