From 4199cf79e4989d839ee48bd5d38d0cda1e4bc3b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Umur=20Kontac=C4=B1?= <umur@umur.io>
Date: Tue, 18 Oct 2016 23:38:36 -0700
Subject: [PATCH] i18n-no-this-translate: Add 18n-no-this-translate (#28)

---
 packages/eslint-plugin-wpcalypso/README.md    |  1 +
 .../docs/rules/i18n-no-this-translate.md      | 31 ++++++++++++++++
 .../lib/rules/i18n-no-this-translate.js       | 35 +++++++++++++++++++
 .../tests/lib/rules/i18n-no-this-translate.js | 35 +++++++++++++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 packages/eslint-plugin-wpcalypso/docs/rules/i18n-no-this-translate.md
 create mode 100644 packages/eslint-plugin-wpcalypso/lib/rules/i18n-no-this-translate.js
 create mode 100644 packages/eslint-plugin-wpcalypso/tests/lib/rules/i18n-no-this-translate.js

diff --git a/packages/eslint-plugin-wpcalypso/README.md b/packages/eslint-plugin-wpcalypso/README.md
index 8f1f9d6845924..a337912b28f48 100644
--- a/packages/eslint-plugin-wpcalypso/README.md
+++ b/packages/eslint-plugin-wpcalypso/README.md
@@ -47,6 +47,7 @@ Then configure the rules you want to use under the rules section.
 - [`i18n-named-placeholders`](docs/rules/i18n-named-placeholders.md): Disallow multiple unnamed placeholders
 - [`i18n-no-collapsible-whitespace`](docs/rules/i18n-no-collapsible-whitespace.md): Disallow collapsible whitespace in translatable strings
 - [`i18n-no-placeholders-only`](docs/rules/i18n-no-placeholders-only.md): Disallow strings which include only placeholders
+- [`i18n-no-this-translate`](docs/rules/i18n-no-this-translate.md): Disallow this.translate()
 - [`i18n-no-variables`](docs/rules/i18n-no-variables.md): Disallow variables as translate strings
 - [`jsx-classname-namespace`](docs/rules/jsx-classname-namespace.md): Ensure JSX className adheres to CSS namespace guidelines
 - [`jsx-gridicon-size`](docs/rules/jsx-gridicon-size.md): Enforce recommended Gridicon size attributes
diff --git a/packages/eslint-plugin-wpcalypso/docs/rules/i18n-no-this-translate.md b/packages/eslint-plugin-wpcalypso/docs/rules/i18n-no-this-translate.md
new file mode 100644
index 0000000000000..96d2d27b42b99
--- /dev/null
+++ b/packages/eslint-plugin-wpcalypso/docs/rules/i18n-no-this-translate.md
@@ -0,0 +1,31 @@
+# Disallow this.translate()
+Disallows the usage of `this.translate()` in favor of the high order component `localize()` from `i18n-calypso` repository.
+
+## Rule Details
+
+This rules aims to prevent the usage of `this.translate` that uses the mixin approach which makes the components harder to test.
+The following is considered a warning:
+```js
+const MyComponent = React.createClass( {
+	render() {
+		return this.translate( 'Hello World' );
+	}
+} );
+```
+
+The following patterns are not warnings:
+
+```js
+import i18n from 'i18n-calypso';
+i18n.translate('Hello World');
+```
+
+```js
+import { localize } from 'i18n-calypso';
+const MyComponent = React.createClass( {
+	render() {
+		return this.props.translate( 'Hello World' );
+	}
+} );
+export default localize( MyComponent );
+```
diff --git a/packages/eslint-plugin-wpcalypso/lib/rules/i18n-no-this-translate.js b/packages/eslint-plugin-wpcalypso/lib/rules/i18n-no-this-translate.js
new file mode 100644
index 0000000000000..134b58aeb91d4
--- /dev/null
+++ b/packages/eslint-plugin-wpcalypso/lib/rules/i18n-no-this-translate.js
@@ -0,0 +1,35 @@
+/**
+ * @fileoverview Disallow the use of this.translate
+ * @author Automattic
+ * @copyright 2016 Automattic. All rights reserved.
+ * See LICENSE.md file in root directory for full license.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+const ERROR_MESSAGE = 'Use localize( ReactComponent ) instead of this.translate';
+
+module.exports = {
+	meta: {
+		docs: {
+			description: 'Disallow the use of this.translate',
+			category: 'Deprecation',
+			recommended: true
+		},
+		schema: []
+	},
+	create: function( context ) {
+		return {
+			CallExpression: function( node ) {
+				if ( node.callee.type === 'MemberExpression' &&
+					node.callee.object.type === 'ThisExpression' &&
+					node.callee.property.name === 'translate' ) {
+					context.report( node, ERROR_MESSAGE );
+				}
+			}
+		};
+	}
+};
diff --git a/packages/eslint-plugin-wpcalypso/tests/lib/rules/i18n-no-this-translate.js b/packages/eslint-plugin-wpcalypso/tests/lib/rules/i18n-no-this-translate.js
new file mode 100644
index 0000000000000..ac229db8bdfbb
--- /dev/null
+++ b/packages/eslint-plugin-wpcalypso/tests/lib/rules/i18n-no-this-translate.js
@@ -0,0 +1,35 @@
+/**
+ * @fileoverview Disallow the use of this.translate
+ * @author Automattic
+ * @copyright 2016 Automattic. All rights reserved.
+ * See LICENSE.md file in root directory for full license.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require( '../../../lib/rules/i18n-no-this-translate' ),
+	RuleTester = require( 'eslint' ).RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+( new RuleTester() ).run( 'i18n-no-this-translate', rule, {
+	valid: [
+		'i18n.translate(\'hello\')',
+		'translate(\'hello\')',
+		'this.props.translate(\'hello\')'
+	],
+
+	invalid: [
+		{
+			code: 'this.translate(\'hello\')',
+			errors: [ {
+				message: 'Use localize( ReactComponent ) instead of this.translate'
+			} ]
+		}
+	]
+} );