Merge pull request #9 from simonihmig/find

Add optional transform for find() to this.element.querySelector()

Author: simonihmig

README.md

@@ -60,7 +60,7 @@ This addon will perform the following transformations suitable for integration t
 If you want to run only selected transforms on your code, you can pick just the needed transform:
 
 ```bash
-jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/integration/click.js tests/integration
+jscodeshift -t path/to/ember-test-helpers-codemod/lib/transforms/integration/click.js tests/integration
 ```
 
 ### Acceptance tests
@@ -104,7 +104,24 @@ These transformations are available for tests based on `ember-native-dom-helpers
 If you want to run only selected transforms on your code, you can pick just the needed transform:
 
 ```bash
-jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/native-dom/find.js tests/integration
+jscodeshift -t path/to/ember-test-helpers-codemod/lib/transforms/native-dom/find.js tests/integration
 ```
 
+### Replace find/findAll
 
+By default this codemod will use the `find()` and `findAll()` helpers from `@ember/test-helpers` where required. 
+If you want to use the native query functions `this.element.querySelector()` / `this.element.querySelectorAll()` instead, 
+you can use the `find.js` transform after you have run the other transformations:
+
+```bash
+jscodeshift -t path/to/ember-test-helpers-codemod/lib/transforms/find.js tests
+```
+
+| Before               | After                                   | Transform      |
+|----------------------|-----------------------------------------|----------------|
+| `find('.foo')`       | `this.element.querySelector('.foo')`    | `find.js`      |
+| `findAll('.foo')`    | `this.element.querySelectorAll('.foo')` | `find.js`      |
+
+Note that this will require all instances of `find`/`findAll` to have the correct `this` context, otherwise you will run
+into `Cannot read property 'querySelector' of undefined` exceptions, as `this.element` will not be defined. This can 
+happen outside of the main `test` function, for example inside of custom test helper functions.

__testfixtures__/find.input.js

@@ -0,0 +1,6 @@
+import { find, findAll } from '@ember/test-helpers';
+
+test('it renders', function(assert) {
+  assert.equal(find('.foo').textContent.trim(), 'bar');
+  assert.equal(findAll('.bar').length, 2);
+});

__testfixtures__/find.output.js

@@ -0,0 +1,5 @@
+
+test('it renders', function(assert) {
+  assert.equal(this.element.querySelector('.foo').textContent.trim(), 'bar');
+  assert.equal(this.element.querySelectorAll('.bar').length, 2);
+});

__tests__/find-test.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+defineTest(__dirname, 'index', { type: 'find' }, 'find');

index.js

@@ -1,9 +1,12 @@
 const integrationPreset = require('./lib/presets/integration');
 const acceptancePreset = require('./lib/presets/acceptance');
 const nativeDomPreset = require('./lib/presets/native-dom');
+const findTransform = require('./lib/transforms/find');
 
 module.exports = function(file, api, options) {
   switch (options.type) {
+    case 'find':
+      return findTransform(file, api, options);
     case 'native-dom':
       return nativeDomPreset(file, api, options);
     case 'acceptance':

lib/test-runner.js

@@ -3,7 +3,6 @@
 const fs = require('fs');
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
 
-
 module.exports = function testRunner(type) {
   let fixturesPath = `${__dirname}/../__testfixtures__/${type}`;
 

lib/transforms/find.js

@@ -12,14 +12,14 @@ function transform(file, api) {
   let j = api.jscodeshift;
   let root = j(source);
 
-  let nativeDomImportStatement = root.find(j.ImportDeclaration, {
-    source: { value: 'ember-native-dom-helpers' }
+  let importStatement = root.find(j.ImportDeclaration, {
+    source: { value: '@ember/test-helpers' }
   });
-  if (nativeDomImportStatement.length === 0) {
+  if (importStatement.length === 0) {
     return root.toSource({ quote: 'single' });
   }
 
-  let oldSpecifiers = nativeDomImportStatement.get('specifiers');
+  let oldSpecifiers = importStatement.get('specifiers');
   let newSpecifiers = [];
   oldSpecifiers.each(({ node: specifier }) => {
     let importedName = specifier.imported.name;
@@ -46,7 +46,12 @@ function transform(file, api) {
         newSpecifiers.push(specifier);
     }
   });
-  oldSpecifiers.replace(newSpecifiers);
+
+  if (newSpecifiers.length > 0) {
+    oldSpecifiers.replace(newSpecifiers);
+  } else {
+    importStatement.remove();
+  }
 
   return root.toSource({ quote: 'single' });
 }