Merge pull request #31 from dwickern/native-dom-with-context

Migrate ember-native-dom-helpers context argument usage

Author: simonihmig

README.md

@@ -98,8 +98,13 @@ These transformations are available for tests based on `ember-native-dom-helpers
 
 | Before                                | After                   | Transform      |
 |---------------------------------------|-------------------------|----------------|
-| ```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`     |
-
+| ```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';``` |
+| `find('.foo', context)`                      | `context.querySelector('.foo')`                            |
+| `find('.foo', '.context')`                   | `find('.context .foo')`                                    |
+| `findAll('.foo', context)`                   | `context.querySelectorAll('.foo')`                         |
+| `click('.foo', context)`                     | `click(context.querySelector('.foo'))`                     |
+| `click('.foo', context, { shiftKey: true })` | `click(context.querySelector('.foo'), { shiftKey: true })` |
+ 
 
 ### Replace find/findAll
 

transforms/native-dom/__testfixtures__/context-argument.input.js

@@ -0,0 +1,21 @@
+import { find, findAll, visit, click, fillIn } 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');
+
+  const foo = find('.foo');
+  assert.equal(find('.bar', foo).textContent.trim(), 'bar');
+  assert.equal(find('.bar', find('.foo')).textContent.trim(), 'bar');
+  assert.equal(find('.bar', '.foo').textContent.trim(), 'bar');
+  assert.equal(findAll('.bar', foo).length, 2);
+  assert.equal(findAll('.bar', find('.foo')).length, 2);
+  assert.equal(findAll('.bar', '.foo').length, 2);
+
+  await click('button', foo);
+  await click('button', { shiftKey: true });
+  await click('button', foo, { shiftKey: true });
+});

transforms/native-dom/__testfixtures__/context-argument.output.js

@@ -0,0 +1,21 @@
+import { find, findAll, visit, click, fillIn } from '@ember/test-helpers';
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('click');
+
+test('visiting /foo', async function(assert) {
+  await visit('/foo');
+
+  const foo = find('.foo');
+  assert.equal(foo.querySelector('.bar').textContent.trim(), 'bar');
+  assert.equal(find('.foo').querySelector('.bar').textContent.trim(), 'bar');
+  assert.equal(find('.foo .bar').textContent.trim(), 'bar');
+  assert.equal(foo.querySelectorAll('.bar').length, 2);
+  assert.equal(find('.foo').querySelectorAll('.bar').length, 2);
+  assert.equal(findAll('.foo .bar').length, 2);
+
+  await click(foo.querySelector('button'));
+  await click('button', { shiftKey: true });
+  await click(foo.querySelector('button'), { shiftKey: true });
+});

transforms/native-dom/index.js

@@ -38,6 +38,69 @@ function renameCallee(j, root, name, newName) {
     .forEach(({ node }) => node.callee.name = newName);
 }
 
+/**
+ * find(selector, context) => context.querySelector(selector)
+ * findAll(selector, context) => context.querySelectorAll(selector)
+ * click(selector, context) => click(context.querySelector(selector))
+ * click(selector, context, { ...options }) => click(context.querySelector(selector),  { ...options })
+ */
+function migrateHelpersWithContext(j, root, importedName) {
+  switch (importedName) {
+    case 'find':
+      root
+        .find(j.CallExpression, {
+          callee: {
+            name: 'find'
+          },
+          arguments: [ {}, {} ]
+        })
+        .replaceWith(({node}) => {
+          let [ selector, context ] = node.arguments;
+          if (selector.type === 'StringLiteral' && context.type === 'StringLiteral') {
+            return j.callExpression(j.identifier('find'), [ j.literal(`${context.value} ${selector.value}`) ]);
+          }
+          return j.callExpression(j.memberExpression(context, j.identifier('querySelector')), [ selector ])
+        });
+      break;
+    case 'findAll':
+      root
+        .find(j.CallExpression, {
+          callee: {
+            name: 'findAll'
+          },
+          arguments: [ {}, {} ]
+        })
+        .replaceWith(({node}) => {
+          let [ selector, context ] = node.arguments;
+          if (selector.type === 'StringLiteral' && context.type === 'StringLiteral') {
+            return j.callExpression(j.identifier('findAll'), [ j.literal(`${context.value} ${selector.value}`) ]);
+          }
+          return j.callExpression(j.memberExpression(context, j.identifier('querySelectorAll')), [ selector ])
+        });
+      break;
+    case 'click':
+      root
+        .find(j.CallExpression, {
+          callee: {
+            name: 'click'
+          },
+          arguments: [ {}, {} ] // matches 2 or 3 arguments
+        })
+        .replaceWith(({node}) => {
+          let [ selector, context, options ] = node.arguments;
+          if (context.type === 'ObjectExpression') {
+            // click(selector, { ...options })
+            return node;
+          }
+          if (selector.type === 'StringLiteral' && context.type === 'StringLiteral') {
+            return j.callExpression(j.identifier('click'), [ j.literal(`${context.value} ${selector.value}`) ]);
+          }
+          return j.callExpression(j.identifier('click'), [ j.callExpression(j.memberExpression(context, j.identifier('querySelector')), [ selector ]), options ].filter(Boolean));
+        });
+      break;
+  }
+}
+
 /**
  * Transform imports from ember-native-dom-helpers to @ember/test-helpers
  *
@@ -73,6 +136,7 @@ function transform(file, api) {
         if (importedName !== mappedName) {
           renameCallee(j, root, importedName, mappedName);
         }
+        migrateHelpersWithContext(j, root, importedName);
       } else {
         newSpecifiers.push(specifier);
       }