migrate native dom helpers with context argument

Author: dwickern

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);
       }