test: angular-whitespace with interpolation (#494)

* fix(i18n): do not warn with interpolation in i18n element Fix #442 * test: add specs for check-interpolation * test: run all tests
mgechev · Jan 18, 2018 · 97970d2 · 97970d2
1 parent 6a6b3de
commit 97970d2
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 28 deletions.
diff --git a/test/angularWhitespaceRule.spec.ts b/test/angularWhitespaceRule.spec.ts
@@ -1,10 +1,11 @@
-import { assertSuccess, assertAnnotated, assertMultipleAnnotated } from './testHelper';
+import { assertSuccess, assertAnnotated, assertMultipleAnnotated, assertFailure, assertFailures } from './testHelper';
 import { Replacement } from 'tslint';
 import { expect } from 'chai';
 import { FsFileResolver } from '../src/angular/fileResolver/fsFileResolver';
 import { MetadataReader } from '../src/angular/metadataReader';
 import * as ts from 'typescript';
 import chai = require('chai');
+import { readFileSync } from 'fs';
 
 const getAst = (code: string, file = 'file.ts') => {
   return ts.createSourceFile(file, code, ts.ScriptTarget.ES5, true);
@@ -118,7 +119,6 @@ describe('angular-whitespace', () => {
         })
         class Bar {}
         `;
-        const reader = new MetadataReader(new FsFileResolver());
         const ast = getAst(code, __dirname + '/../../test/fixtures/angularWhitespace/component.ts');
         assertSuccess('angular-whitespace', ast, ['check-pipe']);
       });
@@ -167,7 +167,6 @@ describe('angular-whitespace', () => {
           ponies = []
         }
         `;
-        const reader = new MetadataReader(new FsFileResolver());
         const ast = getAst(code, __dirname + '/../../test/fixtures/angularWhitespace/component.ts');
         assertSuccess('angular-whitespace', ast, ['check-pipe']);
       });
@@ -307,8 +306,8 @@ describe('failure', () => {
       assertMultipleAnnotated({
         ruleName: 'angular-whitespace',
         failures: [
-          {char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
-          {char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+          { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+          { char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
         ],
         source,
         options: ['check-interpolation']
@@ -346,8 +345,8 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
-            {char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+            { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
           ],
           source,
           options: ['check-interpolation']
@@ -379,8 +378,8 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
-            {char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+            { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
           ],
           source,
           options: ['check-interpolation']
@@ -400,6 +399,118 @@ describe('failure', () => {
           class Bar {}`);
       });
 
+      it('should fail and apply proper replacements when style is incorrect', () => {
+        let source = `
+          @Component({
+            template: \`
+              <h1>
+                {{foo}}
+                ~~   ^^
+              </h1>
+            \`
+          })
+          class Bar {}`;
+        const failures = assertMultipleAnnotated({
+          ruleName: 'angular-whitespace',
+          failures: [
+            { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+          ],
+          source,
+          options: ['check-interpolation']
+        });
+
+        const res = Replacement.applyAll(source, [].concat.apply([], failures.map(f => f.getFix())));
+        expect(res).to.eq(`
+          @Component({
+            template: \`
+              <h1>
+                {{ foo }}
+                ~~   ^^
+              </h1>
+            \`
+          })
+          class Bar {}`);
+      });
+
+      it('should fail and apply proper replacements when style is incorrect', () => {
+        let source = `
+          @Component({
+            template: \`
+              <div>
+                {{message.ACTIVATED}}
+                ~~                 ^^
+              </div>
+            \`
+          })
+          class Bar {}`;
+        const failures = assertMultipleAnnotated({
+          ruleName: 'angular-whitespace',
+          failures: [
+            { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '^', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+          ],
+          source,
+          options: ['check-interpolation']
+        });
+
+        const res = Replacement.applyAll(source, [].concat.apply([], failures.map(f => f.getFix())));
+        expect(res).to.eq(`
+          @Component({
+            template: \`
+              <div>
+                {{ message.ACTIVATED }}
+                ~~                 ^^
+              </div>
+            \`
+          })
+          class Bar {}`);
+      });
+
+      it('should work with external templates with interpolation', () => {
+        const code = `
+        @Component({
+          selector: 'foo',
+          moduleId: module.id,
+          templateUrl: 'interpolation.html',
+        })
+        class Bar {
+          ponies = []
+        }
+        `;
+        const ast = getAst(code, __dirname + '/../../test/fixtures/angularWhitespace/component.ts');
+        const failures = assertFailures('angular-whitespace', ast, [{
+          message: 'Missing whitespace in interpolation start; expecting {{ expr }}',
+          startPosition: {
+            line: 2,
+            character: 3
+          },
+          endPosition: {
+            line: 2,
+            character: 5
+          }
+        }, {
+          message: 'Missing whitespace in interpolation end; expecting {{ expr }}',
+          startPosition: {
+            line: 2,
+            character: 22
+          },
+          endPosition: {
+            line: 2,
+            character: 24
+          }
+        }
+        ], ['check-interpolation']);
+        const template = readFileSync(__dirname + '/../../test/fixtures/angularWhitespace/interpolation.html').toString();
+        const res = Replacement.applyAll(template, [].concat.apply([], failures.map(f => f.getFix())));
+        expect(res).to.equal(`<div class="account-product__sub-title">
+  <div *ngIf="productIsFixed">
+    {{ message.ACTIVATED }}
+  </div>
+</div>
+`);
+      });
+
       it('should fail and apply proper replacements when style is incorrect with multiple failures', () => {
         let source = `
           @Component({
@@ -418,10 +529,10 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
-            {char: '-', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
-            {char: '^', msg: 'Extra whitespace in interpolation start; expecting {{ expr }}', },
-            {char: '#', msg: 'Extra whitespace in interpolation end; expecting {{ expr }}', },
+            { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '-', msg: 'Missing whitespace in interpolation end; expecting {{ expr }}', },
+            { char: '^', msg: 'Extra whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '#', msg: 'Extra whitespace in interpolation end; expecting {{ expr }}', },
           ],
           source,
           options: ['check-interpolation']
@@ -483,8 +594,8 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Extra whitespace in interpolation start; expecting {{ expr }}', },
-            {char: '^', msg: 'Extra whitespace in interpolation end; expecting {{ expr }}', },
+            { char: '~', msg: 'Extra whitespace in interpolation start; expecting {{ expr }}', },
+            { char: '^', msg: 'Extra whitespace in interpolation end; expecting {{ expr }}', },
           ],
           source,
           options: ['check-interpolation']
@@ -667,8 +778,8 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
-            {char: '^', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
+            { char: '~', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
+            { char: '^', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
           ],
           source,
           options: ['check-semicolon']
@@ -697,8 +808,8 @@ describe('failure', () => {
         const failures = assertMultipleAnnotated({
           ruleName: 'angular-whitespace',
           failures: [
-            {char: '~', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
-            {char: '^', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
+            { char: '~', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
+            { char: '^', msg: 'Missing whitespace after semicolon; expecting \'; expr\'', },
           ],
           source,
           options: ['check-semicolon']
@@ -930,8 +1041,8 @@ describe('pipes', () => {
     const failures = assertMultipleAnnotated({
       ruleName: 'angular-whitespace',
       failures: [
-        {char: '~', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
-        {char: '^', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
+        { char: '~', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
+        { char: '^', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
       ],
       source,
       options: ['check-pipe']
@@ -1056,8 +1167,8 @@ describe('angular-whitespace multiple checks', () => {
       const failures = assertMultipleAnnotated({
         ruleName: 'angular-whitespace',
         failures: [
-          {char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
-          {char: '^', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
+          { char: '~', msg: 'Missing whitespace in interpolation start; expecting {{ expr }}', },
+          { char: '^', msg: 'The pipe operator should be surrounded by one space on each side, i.e. " | ".', },
         ],
         source,
         options: ['check-interpolation', 'check-pipe']

diff --git a/test/fixtures/angularWhitespace/interpolation.html b/test/fixtures/angularWhitespace/interpolation.html
@@ -0,0 +1,5 @@
+<div class="account-product__sub-title">
+  <div *ngIf="productIsFixed">
+    {{message.ACTIVATED}}
+  </div>
+</div>
diff --git a/test/testHelper.ts b/test/testHelper.ts
@@ -81,7 +81,7 @@ export interface AssertMultipleConfigs {
   ruleName: string;
   source: string;
   options?: any;
-  failures: {char: string; msg: string}[];
+  failures: { char: string; msg: string }[];
 }
 
 /**
@@ -205,8 +205,8 @@ export function assertMultipleAnnotated(configs: AssertMultipleConfigs): Lint.Ru
  *                       This is 0-based index of the error that will be tested for. 0 by default.
  * @returns {any}
  */
-export function assertFailure(ruleName: string, source: string, fail: IExpectedFailure,
-                              options = null, onlyNthFailure: number = 0): Lint.RuleFailure[] {
+export function assertFailure(ruleName: string, source: string | ts.SourceFile, fail: IExpectedFailure,
+  options = null, onlyNthFailure: number = 0): Lint.RuleFailure[] {
   let result: Lint.LintResult;
   try {
     result = lint(ruleName, source, options);
@@ -233,8 +233,8 @@ export function assertFailure(ruleName: string, source: string, fail: IExpectedF
  * @param fails
  * @param options
  */
-export function assertFailures(ruleName: string, source: string, fails: IExpectedFailure[], options = null) {
-  let result;
+export function assertFailures(ruleName: string, source: string | ts.SourceFile, fails: IExpectedFailure[], options = null) {
+  let result: tslint.LintResult;
   try {
     result = lint(ruleName, source, options);
   } catch (e) {
@@ -246,6 +246,7 @@ export function assertFailures(ruleName: string, source: string, fails: IExpecte
     chai.assert.deepEqual(fails[index].startPosition, ruleFail.getStartPosition().getLineAndCharacter(), 'start char doesn\'t match');
     chai.assert.deepEqual(fails[index].endPosition, ruleFail.getEndPosition().getLineAndCharacter(), 'end char doesn\'t match');
   });
+  return result.failures;
 }
 
 /**