wip

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biesbjerg/ngx-translate-extract",
-  "version": "6.0.4",
+  "version": "7.0.0",
   "description": "Extract strings from projects using ngx-translate",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -61,42 +61,42 @@
   },
   "config": {},
   "devDependencies": {
-    "@angular/compiler": "^9.1.1",
+    "@angular/compiler": "^9.1.9",
     "@types/braces": "^3.0.0",
     "@types/chai": "^4.2.11",
-    "@types/flat": "^5.0.0",
+    "@types/flat": "^5.0.1",
     "@types/gettext-parser": "4.0.0",
     "@types/glob": "^7.1.1",
     "@types/mkdirp": "^1.0.0",
     "@types/mocha": "^7.0.2",
-    "@types/node": "^12.12.31",
+    "@types/node": "^12.12.42",
-    "@types/yargs": "^15.0.4",
+    "@types/yargs": "^15.0.5",
     "braces": "^3.0.2",
     "chai": "^4.2.0",
-    "husky": "^4.2.3",
+    "husky": "^4.2.5",
-    "lint-staged": "^10.0.9",
+    "lint-staged": "^10.2.6",
-    "mocha": "^7.1.1",
+    "mocha": "^7.2.0",
-    "prettier": "^2.0.2",
+    "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
-    "ts-node": "^8.8.1",
+    "ts-node": "^8.10.1",
-    "tslint": "^6.1.0",
+    "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-etc": "^1.10.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.3"
   },
   "peerDependencies": {
     "@angular/compiler": "^8.0.0 || ^9.0.0",
     "typescript": "^3.0.0"
   },
   "dependencies": {
-    "@phenomnomnominal/tsquery": "^4.0.0",
+    "@phenomnomnominal/tsquery": "^4.1.0",
     "boxen": "^4.2.0",
-    "colorette": "^1.1.0",
+    "colorette": "^1.2.0",
     "flat": "^5.0.0",
     "gettext-parser": "^4.0.3",
     "glob": "^7.1.6",
-    "mkdirp": "^1.0.3",
+    "mkdirp": "^1.0.4",
     "path": "^0.12.7",
     "terminal-link": "^2.1.1",
     "yargs": "^15.3.1"

src/cli/tasks/extract.task.ts

@@ -74,7 +74,7 @@ export class ExtractTask implements TaskInterface {
 			try {
 				let event = 'CREATED';
 				if (fs.existsSync(outputPath)) {
-					this.options.replace ? event = 'REPLACED' : event = 'MERGED';
+					this.options.replace ? (event = 'REPLACED') : (event = 'MERGED');
 				}
 				this.save(outputPath, final);
 				this.out(`%s %s`, dim(`- ${outputPath}`), green(`[${event}]`));

src/parsers/directive.parser.ts

@@ -1,87 +1,180 @@
+import {
+	parseTemplate,
+	TmplAstNode as Node,
+	TmplAstElement as Element,
+	TmplAstText as Text,
+	TmplAstTemplate as Template,
+	TmplAstTextAttribute as TextAttribute,
+	TmplAstBoundAttribute as BoundAttribute,
+	AST,
+	ASTWithSource,
+	LiteralPrimitive,
+	Conditional,
+	Binary,
+	BindingPipe,
+	Interpolation,
+	LiteralArray,
+	LiteralMap
+} from '@angular/compiler';
+
 import { ParserInterface } from './parser.interface';
 import { TranslationCollection } from '../utils/translation.collection';
 import { isPathAngularComponent, extractComponentInlineTemplate } from '../utils/utils';
 
-import { parseTemplate, TmplAstNode, TmplAstElement, TmplAstTextAttribute } from '@angular/compiler';
+const TRANSLATE_ATTR_NAME = 'translate';
+type ElementLike = Element | Template;
 
 export class DirectiveParser implements ParserInterface {
 	public extract(source: string, filePath: string): TranslationCollection | null {
+		let collection: TranslationCollection = new TranslationCollection();
+
 		if (filePath && isPathAngularComponent(filePath)) {
 			source = extractComponentInlineTemplate(source);
 		}
+		const nodes: Node[] = this.parseTemplate(source, filePath);
+		const elements: ElementLike[] = this.getElementsWithTranslateAttribute(nodes);
 
-		let collection: TranslationCollection = new TranslationCollection();
+		elements.forEach((element) => {
+			const attribute = this.getAttribute(element, TRANSLATE_ATTR_NAME);
+			if (attribute?.value) {
+				collection = collection.add(attribute.value);
+				return;
+			}
 
-		const nodes: TmplAstNode[] = this.parseTemplate(source, filePath);
+			const boundAttribute = this.getBoundAttribute(element, TRANSLATE_ATTR_NAME);
-		this.getTranslatableElements(nodes).forEach((element) => {
+			if (boundAttribute?.value) {
-			const key = this.getElementTranslateAttrValue(element) || this.getElementContent(element);
+				this.getLiteralPrimitives(boundAttribute.value).forEach((literalPrimitive) => {
-			collection = collection.add(key);
+					collection = collection.add(literalPrimitive.value);
+				});
+				return;
+			}
+
+			const textNodes = this.getTextNodes(element);
+			textNodes.forEach((textNode) => {
+				collection = collection.add(textNode.value.trim());
+			});
 		});
-
 		return collection;
 	}
 
-	protected getTranslatableElements(nodes: TmplAstNode[]): TmplAstElement[] {
+	/**
-		return nodes
+	 * Find all ElementLike nodes with a translate attribute
-			.filter((element) => this.isElement(element))
+	 * @param nodes
-			.reduce((result: TmplAstElement[], element: TmplAstElement) => {
+	 */
-				return result.concat(this.findChildrenElements(element));
+	protected getElementsWithTranslateAttribute(nodes: Node[]): ElementLike[] {
-			}, [])
+		let elements: ElementLike[] = [];
-			.filter((element) => this.isTranslatable(element));
+		nodes.filter(this.isElementLike).forEach((element) => {
+			if (this.hasAttribute(element, TRANSLATE_ATTR_NAME)) {
+				elements = [...elements, element];
+			}
+			if (this.hasBoundAttribute(element, TRANSLATE_ATTR_NAME)) {
+				elements = [...elements, element];
+			}
+			const childElements = this.getElementsWithTranslateAttribute(element.children);
+			if (childElements.length) {
+				elements = [...elements, ...childElements];
+			}
+		});
+		return elements;
 	}
 
-	protected findChildrenElements(node: TmplAstNode): TmplAstElement[] {
+	/**
-		if (!this.isElement(node)) {
+	 * Get direct child nodes of type Text
-			return [];
+	 * @param element
-		}
+	 */
-
+	protected getTextNodes(element: ElementLike): Text[] {
-		// If element has translate attribute all its content is translatable
+		return element.children.filter(this.isText);
-		// so we don't need to traverse any deeper
-		if (this.isTranslatable(node)) {
-			return [node];
-		}
-
-		return node.children.reduce(
-			(result: TmplAstElement[], childNode: TmplAstNode) => {
-				if (this.isElement(childNode)) {
-					const children = this.findChildrenElements(childNode);
-					return result.concat(children);
-				}
-				return result;
-			},
-			[node]
-		);
 	}
 
-	protected parseTemplate(template: string, path: string): TmplAstNode[] {
+	/**
+	 * Check if attribute is present on element
+	 * @param element
+	 */
+	protected hasAttribute(element: ElementLike, name: string): boolean {
+		return this.getAttribute(element, name) !== undefined;
+	}
+
+	/**
+	 * Get attribute value if present on element
+	 * @param element
+	 */
+	protected getAttribute(element: ElementLike, name: string): TextAttribute {
+		return element.attributes.find((attribute) => attribute.name === name);
+	}
+
+	/**
+	 * Check if bound attribute is present on element
+	 * @param element
+	 * @param name
+	 */
+	protected hasBoundAttribute(element: ElementLike, name: string): boolean {
+		return this.getBoundAttribute(element, name) !== undefined;
+	}
+
+	/**
+	 * Get bound attribute if present on element
+	 * @param element
+	 * @param name
+	 */
+	protected getBoundAttribute(element: ElementLike, name: string): BoundAttribute {
+		return element.inputs.find((input) => input.name === name);
+	}
+
+	/**
+	 * Get literal primitives from expression
+	 * @param exp
+	 */
+	protected getLiteralPrimitives(exp: AST): LiteralPrimitive[] {
+		if (exp instanceof LiteralPrimitive) {
+			return [exp];
+		}
+
+		let visit: AST[] = [];
+		if (exp instanceof Interpolation) {
+			visit = exp.expressions;
+		} else if (exp instanceof LiteralArray) {
+			visit = exp.expressions;
+		} else if (exp instanceof LiteralMap) {
+			visit = exp.values;
+		} else if (exp instanceof BindingPipe) {
+			visit = [exp.exp];
+		} else if (exp instanceof Conditional) {
+			visit = [exp.trueExp, exp.falseExp];
+		} else if (exp instanceof Binary) {
+			visit = [exp.left, exp.right];
+		} else if (exp instanceof ASTWithSource) {
+			visit = [exp.ast];
+		}
+
+		let results: LiteralPrimitive[] = [];
+		visit.forEach((child) => {
+			results = [...results, ...this.getLiteralPrimitives(child)];
+		});
+		return results;
+	}
+
+	/**
+	 * Check if node type is ElementLike
+	 * @param node
+	 */
+	protected isElementLike(node: Node): node is ElementLike {
+		return node instanceof Element || node instanceof Template;
+	}
+
+	/**
+	 * Check if node type is Text
+	 * @param node
+	 */
+	protected isText(node: Node): node is Text {
+		return node instanceof Text;
+	}
+
+	/**
+	 * Parse a template into nodes
+	 * @param template
+	 * @param path
+	 */
+	protected parseTemplate(template: string, path: string): Node[] {
 		return parseTemplate(template, path).nodes;
 	}
-
-	protected isElement(node: any): node is TmplAstElement {
-		return node?.attributes && node?.children;
-	}
-
-	protected isTranslatable(node: TmplAstNode): boolean {
-		if (this.isElement(node) && node.attributes.some((attribute) => attribute.name === 'translate')) {
-			return true;
-		}
-		return false;
-	}
-
-	protected getElementTranslateAttrValue(element: TmplAstElement): string {
-		const attr: TmplAstTextAttribute = element.attributes.find((attribute) => attribute.name === 'translate');
-		return attr?.value ?? '';
-	}
-
-	protected getElementContent(element: TmplAstElement): string {
-		const content = element.sourceSpan.start.file.content;
-		const start = element.startSourceSpan.end.offset;
-		const end = element.endSourceSpan.start.offset;
-		const val = content.substring(start, end);
-		return this.cleanKey(val);
-	}
-
-	protected cleanKey(val: string): string {
-		return val.replace(/\r?\n|\r|\t/g, '').trim();
-	}
 }

src/parsers/pipe.parser.ts

@@ -1,11 +1,16 @@
 import {
 	AST,
-	TmplAstNode,
+	ASTWithSource,
+	TmplAstNode as Node,
+	TmplAstBoundText as BoundText,
+	TmplAstElement as Element,
+	TmplAstTemplate as Template,
+	TmplAstBoundAttribute as BoundAttribute,
+	TmplAstBoundEvent as BoundEvent,
 	parseTemplate,
 	BindingPipe,
 	LiteralPrimitive,
 	Conditional,
-	TmplAstTextAttribute,
 	Binary,
 	LiteralMap,
 	LiteralArray,
@@ -17,142 +22,99 @@ import { TranslationCollection } from '../utils/translation.collection';
 import { isPathAngularComponent, extractComponentInlineTemplate } from '../utils/utils';
 
 const TRANSLATE_PIPE_NAME = 'translate';
+type ElementLike = Element | Template;
 
 export class PipeParser implements ParserInterface {
 	public extract(source: string, filePath: string): TranslationCollection | null {
+		let collection: TranslationCollection = new TranslationCollection();
+
 		if (filePath && isPathAngularComponent(filePath)) {
 			source = extractComponentInlineTemplate(source);
 		}
+		const nodes: Node[] = this.parseTemplate(source, filePath);
+		const pipes = this.getBindingPipes(nodes, TRANSLATE_PIPE_NAME).filter((pipe) => !this.pipeHasConcatenatedString(pipe));
 
-		let collection: TranslationCollection = new TranslationCollection();
-		const nodes: TmplAstNode[] = this.parseTemplate(source, filePath);
-		const pipes: BindingPipe[] = nodes.map((node) => this.findPipesInNode(node)).flat();
 		pipes.forEach((pipe) => {
-			this.parseTranslationKeysFromPipe(pipe).forEach((key: string) => {
+			this.visitEachChild(pipe, (child) => {
-				collection = collection.add(key);
+				if (child instanceof LiteralPrimitive) {
+					collection = collection.add(child.value);
+				}
 			});
 		});
+
 		return collection;
 	}
 
-	protected findPipesInNode(node: any): BindingPipe[] {
+	protected getBindingPipes(nodes: any[], name: string): BindingPipe[] {
-		let ret: BindingPipe[] = [];
+		let pipes: BindingPipe[] = [];
+		nodes.forEach((node) => {
+			if (this.isElementLike(node)) {
+				pipes = [
+					...pipes,
+					...this.getBindingPipes([
+						...node.inputs,
+						...node.children
+					], name)
+				];
+			}
 
-		if (node?.children) {
+			this.visitEachChild(node, (exp) => {
-			ret = node.children.reduce(
+				if (exp instanceof BindingPipe && exp.name === name) {
-				(result: BindingPipe[], childNode: TmplAstNode) => {
+					pipes = [...pipes, exp];
-					const children = this.findPipesInNode(childNode);
-					return result.concat(children);
-				},
-				[ret]
-			);
-		}
-
-		if (node?.value?.ast) {
-			ret.push(...this.getTranslatablesFromAst(node.value.ast));
-		}
-
-		if (node?.attributes) {
-			const translateableAttributes = node.attributes.filter((attr: TmplAstTextAttribute) => {
-				return attr.name === TRANSLATE_PIPE_NAME;
-			});
-			ret = [...ret, ...translateableAttributes];
-		}
-
-		if (node?.inputs) {
-			node.inputs.forEach((input: any) => {
-				// <element [attrib]="'identifier' | translate">
-				if (input?.value?.ast) {
-					ret.push(...this.getTranslatablesFromAst(input.value.ast));
 				}
 			});
-		}
+		});
-
+		return pipes;
-		return ret;
 	}
 
-	protected parseTranslationKeysFromPipe(pipeContent: BindingPipe | LiteralPrimitive | Conditional): string[] {
+	protected visitEachChild(exp: AST, visitor: (child: AST) => void): void {
-		const ret: string[] = [];
+		visitor(exp);
-		if (pipeContent instanceof LiteralPrimitive) {
+
-			ret.push(pipeContent.value);
+		let children: AST[] = [];
-		} else if (pipeContent instanceof Conditional) {
+		if (exp instanceof BoundText) {
-			const trueExp: LiteralPrimitive | Conditional = pipeContent.trueExp as any;
+			children = [exp.value];
-			ret.push(...this.parseTranslationKeysFromPipe(trueExp));
+		} else if (exp instanceof BoundAttribute) {
-			const falseExp: LiteralPrimitive | Conditional = pipeContent.falseExp as any;
+			children = [exp.value];
-			ret.push(...this.parseTranslationKeysFromPipe(falseExp));
+		} else if (exp instanceof BoundEvent) {
-		} else if (pipeContent instanceof BindingPipe) {
+			children = [exp.handler];
-			ret.push(...this.parseTranslationKeysFromPipe(pipeContent.exp as any));
+		} else if (exp instanceof Interpolation) {
+			children = exp.expressions;
+		} else if (exp instanceof LiteralArray) {
+			children = exp.expressions;
+		} else if (exp instanceof LiteralMap) {
+			children = exp.values;
+		} else if (exp instanceof BindingPipe) {
+			children = [exp.exp, ...exp.args];
+		} else if (exp instanceof Conditional) {
+			children = [exp.trueExp, exp.falseExp];
+		} else if (exp instanceof Binary) {
+			children = [exp.left, exp.right];
+		} else if (exp instanceof ASTWithSource) {
+			children = [exp.ast];
 		}
-		return ret;
+
+		children.forEach((child) => {
+			this.visitEachChild(child, visitor);
+		});
 	}
 
-	protected getTranslatablesFromAst(ast: AST): BindingPipe[] {
+	/**
-		// the entire expression is the translate pipe, e.g.:
+	 * Check if node type is ElementLike
-		// - 'foo' | translate
+	 * @param node
-		// - (condition ? 'foo' : 'bar') | translate
+	 */
-		if (this.expressionIsOrHasBindingPipe(ast)) {
+	protected isElementLike(node: Node): node is ElementLike {
-			return [ast];
+		return node instanceof Element || node instanceof Template;
-		}
-
-		// angular double curly bracket interpolation, e.g.:
-		// - {{ expressions }}
-		if (ast instanceof Interpolation) {
-			return this.getTranslatablesFromAsts(ast.expressions);
-		}
-
-		// ternary operator, e.g.:
-		// - condition ? null : ('foo' | translate)
-		// - condition ? ('foo' | translate) : null
-		if (ast instanceof Conditional) {
-			return this.getTranslatablesFromAsts([ast.trueExp, ast.falseExp]);
-		}
-
-		// string concatenation, e.g.:
-		// - 'foo' + 'bar' + ('baz' | translate)
-		if (ast instanceof Binary) {
-			return this.getTranslatablesFromAsts([ast.left, ast.right]);
-		}
-
-		// a pipe on the outer expression, but not the translate pipe - ignore the pipe, visit the expression, e.g.:
-		// - { foo: 'Hello' | translate } | json
-		if (ast instanceof BindingPipe) {
-			return this.getTranslatablesFromAst(ast.exp);
-		}
-
-		// object - ignore the keys, visit all values, e.g.:
-		// - { key1: 'value1' | translate, key2: 'value2' | translate }
-		if (ast instanceof LiteralMap) {
-			return this.getTranslatablesFromAsts(ast.values);
-		}
-
-		// array - visit all its values, e.g.:
-		// - [ 'value1' | translate, 'value2' | translate ]
-		if (ast instanceof LiteralArray) {
-			return this.getTranslatablesFromAsts(ast.expressions);
-		}
-
-		return [];
 	}
 
-	protected getTranslatablesFromAsts(asts: AST[]): BindingPipe[] {
+	/**
-		return this.flatten(asts.map(ast => this.getTranslatablesFromAst(ast)));
+	 * Check if pipe concatenates string (in that case we don't want to extract it)
+	 * @param pipe
+	 */
+	protected pipeHasConcatenatedString(pipe: BindingPipe): boolean {
+		return pipe?.exp instanceof Binary && pipe.exp.operation === '+';
 	}
 
-	protected flatten<T extends AST>(array: T[][]): T[] {
+	protected parseTemplate(template: string, path: string): Node[] {
-		return [].concat(...array);
-	}
-
-	protected expressionIsOrHasBindingPipe(exp: any): exp is BindingPipe {
-		if (exp.name && exp.name === TRANSLATE_PIPE_NAME) {
-			return true;
-		}
-		if (exp.exp && exp.exp instanceof BindingPipe) {
-			return this.expressionIsOrHasBindingPipe(exp.exp);
-		}
-		return false;
-	}
-
-	protected parseTemplate(template: string, path: string): TmplAstNode[] {
 		return parseTemplate(template, path).nodes;
 	}
 }

tests/parsers/directive.parser.spec.ts

@@ -12,34 +12,89 @@ describe('DirectiveParser', () => {
 		parser = new DirectiveParser();
 	});
 
-	it('should not choke when no html is present in template', () => {
+
-		const contents = 'Hello World';
+	it('should extract keys when using literal map in bound attribute', () => {
+		const contents = `<div [translate]="{ key1: 'value1' | translate, key2: 'value2' | translate }"></div>`;
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal([]);
+		expect(keys).to.deep.equal(['value1', 'value2']);
 	});
 
-	it('should use contents as key when there is no translate attribute value provided', () => {
+	it('should extract keys when using literal arrays in bound attribute', () => {
+		const contents = `<div [translate]="[ 'value1' | translate, 'value2' | translate ]"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['value1', 'value2']);
+	});
+
+	it('should extract keys when using binding pipe in bound attribute', () => {
+		const contents = `<div [translate]="'KEY1' | withPipe"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using binary expression in bound attribute', () => {
+		const contents = `<div [translate]="keyVar || 'KEY1'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using literal primitive in bound attribute', () => {
+		const contents = `<div [translate]="'KEY1'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using conditional in bound attribute', () => {
+		const contents = `<div [translate]="condition ? 'KEY1' : 'KEY2'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1', 'KEY2']);
+	});
+
+	it('should extract keys when using nested conditionals in bound attribute', () => {
+		const contents = `<div [translate]="isSunny ? (isWarm ? 'Sunny and warm' : 'Sunny but cold') : 'Not sunny'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['Sunny and warm', 'Sunny but cold', 'Not sunny']);
+	});
+
+	it('should extract keys when using interpolation', () => {
+		const contents = `<div translate="{{ 'KEY1' + key2 + 'KEY3' }}"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1', 'KEY3']);
+	});
+
+	it('should extract keys keeping proper whitespace', () => {
+		const contents = `
+			<div translate>
+				Wubba
+				Lubba
+				Dub Dub
+			</div>
+		`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['Wubba Lubba Dub Dub']);
+	});
+
+	it('should use element contents as key when no translate attribute value is present', () => {
 		const contents = '<div translate>Hello World</div>';
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['Hello World']);
 	});
 
-	it('should use translate attribute value as key when provided', () => {
+	it('should use translate attribute value as key when present', () => {
 		const contents = '<div translate="MY_KEY">Hello World<div>';
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['MY_KEY']);
 	});
 
-	it('should not process children when translate attribute is present', () => {
+	it('should extract keys from child elements when translate attribute is present', () => {
 		const contents = `<div translate>Hello <strong translate>World</strong></div>`;
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['Hello <strong translate>World</strong>']);
+		expect(keys).to.deep.equal(['Hello', 'World']);
 	});
 
-	it('should not exclude html tags in children', () => {
+	it('should not extract keys from child elements when translate attribute is not present', () => {
 		const contents = `<div translate>Hello <strong>World</strong></div>`;
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['Hello <strong>World</strong>']);
+		expect(keys).to.deep.equal(['Hello']);
 	});
 
 	it('should extract and parse inline template', () => {
@@ -72,43 +127,16 @@ describe('DirectiveParser', () => {
 		expect(collection.values).to.deep.equal({});
 	});
 
-	it('should extract contents from within custom tags', () => {
+	it('should extract contents from custom elements', () => {
 		const contents = `<custom-table><tbody><tr><td translate>Hello World</td></tr></tbody></custom-table>`;
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['Hello World']);
 	});
 
-	it('should not cause error when no html is present in template', () => {
+	it('should extract from template without leading/trailing whitespace', () => {
 		const contents = `
-			import { Component } from '@angular/core';
+			<div *ngIf="!isLoading && studentsToGrid && studentsToGrid.length == 0" class="no-students" mt-rtl translate>There
-			@Component({
+				are currently no students in this class. The good news is, adding students is really easy! Just use the options
-				template: '{{ variable }}'
-			})
-			export class MyComponent {
-				variable: string
-			}
-		`;
-		const keys = parser.extract(contents, componentFilename).keys();
-		expect(keys).to.deep.equal([]);
-	});
-
-	it('should extract contents without line breaks', () => {
-		const contents = `
-			<p translate>
-				Please leave a message for your client letting them know why you 
-				rejected the field and what they need to do to fix it.
-			</p>
-		`;
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal([
-			'Please leave a message for your client letting them know why you rejected the field and what they need to do to fix it.'
-		]);
-	});
-
-	it('should extract contents without indent spaces', () => {
-		const contents = `
-			<div *ngIf="!isLoading && studentsToGrid && studentsToGrid.length == 0" class="no-students" mt-rtl translate>There 
-				are currently no students in this class. The good news is, adding students is really easy! Just use the options 
 				at the top.
 			</div>
 		`;
@@ -118,27 +146,28 @@ describe('DirectiveParser', () => {
 		]);
 	});
 
-	it('should extract contents without indent spaces', () => {
+	it('should extract keys from element without leading/trailing whitespace', () => {
-		const contents = `<button mat-button (click)="search()" translate>client.search.searchBtn</button>`;
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['client.search.searchBtn']);
-	});
-
-	it('should extract contents without indent spaces and trim leading/trailing whitespace', () => {
 		const contents = `
 			<div translate>
-				this is an example 
+				this is an example
-				of a long label 
+				of a long label
 			</div>
 
 			<div>
 				<p translate>
-					this is an example 
+					this is an example
-					of a long label 
+					of another a long label
 				</p>
 			</div>
 		`;
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['this is an example of a long label']);
+		expect(keys).to.deep.equal(['this is an example of a long label', 'this is an example of another a long label']);
 	});
+
+	it('should collapse excessive whitespace', () => {
+		const contents = '<p translate>this      is an example</p>';
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['this is an example']);
+	});
+
 });