feat: Remove redundant expression containers. Added test

.eslintignore

@@ -2,3 +2,8 @@
 /packages/*/node_modules
 /packages/*/coverage
 /packages/*/dist
+
+# Test fixtures for jscodeshifts should be ignored, mainly because jscodeshift
+# adds semicolons to its output, and also because we do not care if variables
+# are defined or not in jscodeshift fixtures.
+__testfixtures__

packages/cozy-codeshifts/package.json

@@ -11,6 +11,8 @@
     "build": "babel src -d dist --verbose"
   },
   "devDependencies": {
+    "jest": "^24.8.0",
+    "jscodeshift": "^0.6.4",
     "jsdoc-to-markdown": "^5.0.0"
   }
 }

packages/cozy-codeshifts/src/transforms/__testfixtures__/apply-flag.input.js

@@ -0,0 +1,17 @@
+import Old from './old'
+import New from './old'
+import React from 'react'
+import flag from 'cozy-flags'
+
+const Component = () => {
+  return flag('test-flag') ? <New /> : <Old />
+}
+
+const App = () => {
+  return (
+    <div>
+      {/* My comment */}
+      {flag('test-flag') ? <Component /> : null}
+    </div>
+  )
+}

packages/cozy-codeshifts/src/transforms/__testfixtures__/apply-flag.output.js

@@ -0,0 +1,15 @@
+import New from './old'
+import React from 'react'
+
+const Component = () => {
+  return <New />;
+}
+
+const App = () => {
+  return (
+    <div>
+      {/* My comment */}
+      <Component />
+    </div>
+  );
+}

packages/cozy-codeshifts/src/transforms/__tests__/apply-flag.spec.js

@@ -0,0 +1,2 @@
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+defineTest(__dirname, 'apply-flag')

packages/cozy-codeshifts/src/transforms/apply-flag.js

@@ -2,6 +2,7 @@ import simplifyConditions from '../utils/simplify-conditions'
 import removeUnusedImports from '../utils/remove-unused-imports'
 import replaceBooleanVars from '../utils/replace-boolean-vars'
 import removeFalseJSXExpressionContainers from '../utils/remove-false-jsx-expression-containers'
+import removeRedundantJSXExpressionContainers from '../utils/remove-redundant-jsx-expression-containers'
 
 const flagCallFinder = name => ({
   callee: { name: 'flag' },
@@ -14,7 +15,7 @@ export default function applyFlag(file, api) {
 
   // Replace flags by true
   const flagName =
-    typeof process !== 'undefined' ? process.env.FLAG : 'reimbursement-tag'
+    process.env.NODE_ENV === 'test' ? 'test-flag' : process.env.FLAG
   const flags = root.find(j.CallExpression, flagCallFinder(flagName))
   flags.forEach(flagCall => {
     flagCall.replace(j.literal(true))
@@ -24,5 +25,6 @@ export default function applyFlag(file, api) {
   simplifyConditions(root, j)
   removeUnusedImports(root, j)
   removeFalseJSXExpressionContainers(root, j)
+  removeRedundantJSXExpressionContainers(root, j)
   return root.toSource()
 }

packages/cozy-codeshifts/src/utils/remove-redundant-jsx-expression-containers.js

@@ -0,0 +1,22 @@
+/**
+ * Remove redundant expression containers.
+ *
+ * @example
+ * <div>{<div></div>}</div> -> <div><div></div></div>
+ *
+ * @param  {PathNode} root
+ * @param  {Object} j
+ * @return
+ */
+const removeRedundantExpressionContainers = (root, j) => {
+  root.find(j.JSXExpressionContainer).forEach(path => {
+    if (
+      path.parentPath.node.type == 'JSXElement' &&
+      path.node.expression.type === 'JSXElement'
+    ) {
+      path.replace(path.node.expression)
+    }
+  })
+}
+
+export default removeRedundantExpressionContainers