Add typings and update tests

elastic · Oct 5, 2018 · 6486b93 · 6486b93
1 parent 8d14ffc
commit 6486b93
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 41 deletions.
diff --git a/packages/kbn-i18n/package.json b/packages/kbn-i18n/package.json
@@ -22,7 +22,6 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@types/angular-sanitize": "^1.3.7",
     "@types/intl-relativeformat": "^2.1.0",
     "@types/json5": "^0.0.30",
     "@types/react-intl": "^2.3.11",

diff --git a/packages/kbn-i18n/src/angular/__snapshots__/directive.test.ts.snap b/packages/kbn-i18n/src/angular/__snapshots__/directive.test.ts.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`i18nDirective inserts correct translation html content 1`] = `
+<div
+  class="ng-scope ng-isolate-scope"
+  i18n-default-message="Default message"
+  i18n-id="id"
+>
+  Default message
+</div>
+`;
+
+exports[`i18nDirective inserts correct translation html content with values 1`] = `
+<div
+  class="ng-scope ng-isolate-scope"
+  i18n-default-message="Default message, {value}"
+  i18n-id="id"
+  i18n-values="{ value: '<div i18n-id=\\"id2\\" i18n-default-message=\\"<span>inner message</span>\\" />' }"
+>
+  Default message, 
+  <div
+    class="ng-scope ng-isolate-scope"
+    i18n-default-message="<span>inner message</span>"
+    i18n-id="id2"
+  >
+    <span
+      class="ng-scope"
+    >
+      inner message
+    </span>
+  </div>
+</div>
+`;
+
+exports[`i18nDirective sanitizes defaultMessage 1`] = `
+<div
+  class="ng-scope ng-isolate-scope"
+  i18n-default-message="Dangerous default message, {value}"
+  i18n-id="id"
+  i18n-values="{ value: '<div i18n-id=\\"id2\\" i18n-default-message=\\"<script></script>inner message\\" />' }"
+>
+  Dangerous default message, 
+  <div
+    class="ng-scope ng-isolate-scope"
+    i18n-default-message="<script></script>inner message"
+    i18n-id="id2"
+  >
+    inner message
+  </div>
+</div>
+`;
diff --git a/packages/kbn-i18n/src/angular/directive.test.ts b/packages/kbn-i18n/src/angular/directive.test.ts
@@ -19,12 +19,13 @@
 
 import angular from 'angular';
 import 'angular-mocks';
+import 'angular-sanitize';
 
 import { i18nDirective } from './directive';
 import { I18nProvider } from './provider';
 
 angular
-  .module('app', [])
+  .module('app', ['ngSanitize'])
   .provider('i18n', I18nProvider)
   .directive('i18nId', i18nDirective);
 
@@ -43,38 +44,46 @@ describe('i18nDirective', () => {
   );
 
   test('inserts correct translation html content', () => {
-    const id = 'id';
-    const defaultMessage = 'default-message';
+    const element = angular.element(
+      `<div
+        i18n-id="id"
+        i18n-default-message="Default message"
+      />`
+    );
+
+    compile(element)(scope);
+    scope.$digest();
 
+    expect(element[0]).toMatchSnapshot();
+  });
+
+  test('sanitizes defaultMessage', () => {
     const element = angular.element(
       `<div
-        i18n-id="${id}"
-        i18n-default-message="${defaultMessage}"
+        i18n-id="id"
+        i18n-default-message="Dangerous default message, {value}"
+        i18n-values="{ value: '<div i18n-id=&quot;id2&quot; i18n-default-message=&quot;<script></script>inner message&quot; />' }"
       />`
     );
 
     compile(element)(scope);
     scope.$digest();
 
-    expect(element.html()).toEqual(defaultMessage);
+    expect(element[0]).toMatchSnapshot();
   });
 
   test('inserts correct translation html content with values', () => {
-    const id = 'id';
-    const defaultMessage = 'default-message {word}';
-    const compiledContent = 'default-message word';
-
     const element = angular.element(
       `<div
-        i18n-id="${id}"
-        i18n-default-message="${defaultMessage}"
-        i18n-values="{ word: 'word' }"
+        i18n-id="id"
+        i18n-default-message="Default message, {value}"
+        i18n-values="{ value: '<div i18n-id=&quot;id2&quot; i18n-default-message=&quot;<span>inner message</span>&quot; />' }"
       />`
     );
 
     compile(element)(scope);
     scope.$digest();
 
-    expect(element.html()).toEqual(compiledContent);
+    expect(element[0]).toMatchSnapshot();
   });
 });
diff --git a/packages/kbn-i18n/src/angular/directive.ts b/packages/kbn-i18n/src/angular/directive.ts
@@ -17,37 +17,33 @@
  * under the License.
  */
 
-import { IDirective, IRootElementService, IScope, ICompileService, sanitize } from 'angular';
+import { ICompileService, IDirective, IRootElementService, IScope } from 'angular';
 
 import { I18nServiceType } from './provider';
 
-export function i18nDirective(i18n: I18nServiceType): IDirective {
+export function i18nDirective(
+  i18n: I18nServiceType,
+  $compile: ICompileService,
+  $sanitize: (html: string) => string
+): IDirective {
   return {
     restrict: 'A',
     scope: {
       id: '@i18nId',
       defaultMessage: '@i18nDefaultMessage',
       values: '=i18nValues',
     },
-    link(
-      $scope: IScope,
-      $element: IRootElementService,
-      $compile: ICompileService,
-      $sanitize: sanitize.ISanitizeService
-    ) {
+    link($scope: IScope, $element: IRootElementService) {
       $scope.$watchGroup(
         ['id', 'defaultMessage', 'values'],
         ([id, defaultMessage = '', values = {}]) => {
           $element.html(
-            $sanitize(
-              i18n(id, {
-                values,
-                defaultMessage,
-              })
-            )
+            i18n(id, {
+              values,
+              defaultMessage: $sanitize(defaultMessage),
+            })
           );
-
-          $compile($element.contents())($scope.$parent);
+          $compile($element.contents() as any)($scope.$parent);
         }
       );
     },

diff --git a/packages/kbn-i18n/yarn.lock b/packages/kbn-i18n/yarn.lock
@@ -622,16 +622,6 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@types/angular-sanitize@^1.3.7":
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/@types/angular-sanitize/-/angular-sanitize-1.3.7.tgz#1c4fcf5f517adccc731f3c977704c0543eb19cf9"
-  dependencies:
-    "@types/angular" "*"
-
-"@types/angular@*":
-  version "1.6.51"
-  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.51.tgz#a67515b0ba6a2ff68894a39405c1343cbf9c36d4"
-
 "@types/intl-relativeformat@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz#3a2b0043380388f39c666665ec517e11412f1358"