Merge pull request #5 from simonihmig/e-n-d-h

Add transforms for ember-native-dom-helpers

Author: simonihmig

README.md

@@ -24,6 +24,7 @@ npm install -g ember-test-helpers-codemod
 cd my-ember-app-or-addon
 ember-test-helpers-codemod --type=integration tests/integration
 ember-test-helpers-codemod --type=acceptance tests/acceptance
+ember-test-helpers-codemod --type=native-dom tests
 ```
 
 ## Transformations
@@ -55,10 +56,10 @@ This addon will perform the following transformations suitable for integration t
 | `this.$('.foo').each((index, elem) => {...})`        | `this.element.querySelectorAll('.foo').forEach((elem, index) => {...})`                     | `each.js`      |
 
 
-If you want to run only selected transforms on your code, you can just the needed transform:
+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/click.js tests/integration
+jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/integration/click.js tests/integration
 ```
 
 ### Acceptance tests
@@ -84,10 +85,26 @@ These transformations are available for acceptance tests:
 | `find('.foo').html('foo')`                           | `this.element.querySelector('.foo').innerHTML = 'foo'`                                      | `html.js`      |
 | `find('.foo').each((index, elem) => {...})`          | `this.element.querySelectorAll('.foo').forEach((elem, index) => {...})`                     | `each.js`      |
 
-If you want to run only selected transforms on your code, you can just the needed transform:
+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/click.js tests/integration
+jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/acceptance/click.js tests/integration
+```
+
+### ember-native-dom-helpers tests
+
+These transformations are available tests based on `ember-native-dom-helpers`:
+
+| Before                                | After                                         | Transform      |
+|---------------------------------------|-----------------------------------------------|----------------|
+| `find('.foo')`                        | `this.element.querySelector('.foo')`          | `find.js`      |
+| `findAll('.foo')`                     | `this.element.querySelectorAll('.foo')`       | `find.js`      |
+| ```import { click, find, findAll, fillIn, focus, blur, triggerEvent, keyEvent, waitFor, waitUntil } from 'ember-native-dom-helpers';``` | ```import { click, find, findAll, fillIn, focus, blur, triggerEvent, triggerKeyEvent, waitFor, waitUntil } from '@ember/test-helpers';``` | `migrate-imports.js`     |
+
+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
 ```
 
 

__testfixtures__/native-dom/acceptance.input.js

@@ -0,0 +1,21 @@
+import { currentURL, currentPath, currentRouteName, find, visit } from 'ember-native-dom-helpers';
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('click');
+
+test('visiting /foo', async function(assert) {
+  await visit('/foo');
+  assert.equal(currentURL(), '/foo');
+  assert.ok(find('.foo'));
+});
+
+test('visiting /bar', async function(assert) {
+  await visit('/bar');
+  assert.equal(currentPath(), 'bar');
+});
+
+test('visiting /bar', async function(assert) {
+  await visit('/bar');
+  assert.equal(currentRouteName(), 'bar.index');
+});

__testfixtures__/native-dom/acceptance.output.js

@@ -0,0 +1,22 @@
+import { currentURL, currentRouteName, visit } from '@ember/test-helpers';
+import { currentPath } from 'ember-native-dom-helpers';
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('click');
+
+test('visiting /foo', async function(assert) {
+  await visit('/foo');
+  assert.equal(currentURL(), '/foo');
+  assert.ok(this.element.querySelector('.foo'));
+});
+
+test('visiting /bar', async function(assert) {
+  await visit('/bar');
+  assert.equal(currentPath(), 'bar');
+});
+
+test('visiting /bar', async function(assert) {
+  await visit('/bar');
+  assert.equal(currentRouteName(), 'bar.index');
+});

__testfixtures__/native-dom/integration.input.js

@@ -0,0 +1,52 @@
+import { click, find, findAll, findWithAssert, fillIn, focus, blur, triggerEvent, keyEvent, scrollTo, selectFiles, waitFor, waitUntil } from 'ember-native-dom-helpers';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
+  integration: true
+});
+
+test('it renders', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await click('.foo', {});
+  assert.equal(find('.foo').id, 'foo');
+  await fillIn('.foo input', 'bar');
+  await blur('.foo input');
+  assert.equal(find('.foo').textContent.trim(), 'foo');
+});
+
+test('it renders again', function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  let selector = '.foo input';
+  assert.equal(findAll(selector).length, 1);
+  assert.equal(find(selector).value, 'foo');
+  assert.ok(find('.foo').classList.contains('selected'));
+});
+
+test('and again', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await tap('foo');
+  let el = findWithAssert('.foo input');
+
+  await fillIn(el, value);
+  await triggerEvent('.foo input', 'change');
+  await keyEvent('bar', 'keypress', 13, modifiers);
+
+  await focus('.foo input');
+  await blur('.foo input');
+
+  assert.ok(findAll('.baz')[1].classList.contains('selected'));
+});
+
+test('and yet again', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await scrollTo(document, 10, 20);
+  await selectFiles('input[type=file]', [new Blob(['texters'], { type: 'plain/text' })]);
+  await waitUntil(() => find('.foo.active'));
+  await waitFor('.bar.selected');
+  assert.ok(true);
+});

__testfixtures__/native-dom/integration.output.js

@@ -0,0 +1,53 @@
+import { click, fillIn, focus, blur, triggerEvent, triggerKeyEvent, waitFor, waitUntil } from '@ember/test-helpers';
+import { findWithAssert, scrollTo, selectFiles } from 'ember-native-dom-helpers';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('foo-bar', 'Integration | Component | foo bar', {
+  integration: true
+});
+
+test('it renders', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await click('.foo', {});
+  assert.equal(this.element.querySelector('.foo').id, 'foo');
+  await fillIn('.foo input', 'bar');
+  await blur('.foo input');
+  assert.equal(this.element.querySelector('.foo').textContent.trim(), 'foo');
+});
+
+test('it renders again', function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  let selector = '.foo input';
+  assert.equal(this.element.querySelectorAll(selector).length, 1);
+  assert.equal(this.element.querySelector(selector).value, 'foo');
+  assert.ok(this.element.querySelector('.foo').classList.contains('selected'));
+});
+
+test('and again', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await tap('foo');
+  let el = findWithAssert('.foo input');
+
+  await fillIn(el, value);
+  await triggerEvent('.foo input', 'change');
+  await triggerKeyEvent('bar', 'keypress', 13, modifiers);
+
+  await focus('.foo input');
+  await blur('.foo input');
+
+  assert.ok(this.element.querySelectorAll('.baz')[1].classList.contains('selected'));
+});
+
+test('and yet again', async function(assert) {
+  this.render(hbs`{{foo-bar}}`);
+
+  await scrollTo(document, 10, 20);
+  await selectFiles('input[type=file]', [new Blob(['texters'], { type: 'plain/text' })]);
+  await waitUntil(() => this.element.querySelector('.foo.active'));
+  await waitFor('.bar.selected');
+  assert.ok(true);
+});

__tests__/native-dom-test.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const testRunner = require('../lib/test-runner');
+
+testRunner('native-dom');

index.js

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

lib/presets/native-dom.js

@@ -0,0 +1,3 @@
+const preset = require('./-preset');
+
+module.exports = preset('native-dom');

lib/test-runner.js

@@ -13,4 +13,4 @@ module.exports = function testRunner(type) {
       defineTest(__dirname, 'index', { type }, `${type}/${match[1]}`);
     }
   });
-}
+};

lib/transforms/native-dom/find.js

@@ -0,0 +1,54 @@
+const { createQuerySelectorExpression, createQuerySelectorAllExpression } = require('../../utils');
+
+/**
+ * Transform find/findAll to this.element.querySelector/-All
+ *
+ * @param file
+ * @param api
+ * @returns {*|string}
+ */
+function transform(file, api) {
+  let source = file.source;
+  let j = api.jscodeshift;
+  let root = j(source);
+
+  let nativeDomImportStatement = root.find(j.ImportDeclaration, {
+    source: { value: 'ember-native-dom-helpers' }
+  });
+  if (nativeDomImportStatement.length === 0) {
+    return root.toSource({ quote: 'single' });
+  }
+
+  let oldSpecifiers = nativeDomImportStatement.get('specifiers');
+  let newSpecifiers = [];
+  oldSpecifiers.each(({ node: specifier }) => {
+    let importedName = specifier.imported.name;
+    switch (importedName) {
+      case 'find':
+        root
+          .find(j.CallExpression, {
+            callee: {
+              name: 'find'
+            }
+          })
+          .replaceWith(({ node }) => createQuerySelectorExpression(j, node.arguments));
+        break;
+      case 'findAll':
+        root
+          .find(j.CallExpression, {
+            callee: {
+              name: 'findAll'
+            }
+          })
+          .replaceWith(({ node }) => createQuerySelectorAllExpression(j, node.arguments));
+        break;
+      default:
+        newSpecifiers.push(specifier);
+    }
+  });
+  oldSpecifiers.replace(newSpecifiers);
+
+  return root.toSource({ quote: 'single' });
+}
+
+module.exports = transform;