Skip to content

Commit c5eb58b

Browse files
simonihmigsimonihmig
authored
Merge pull request #7 from simonihmig/use-find
Use find again
2 parents 7ad619a + ae48a75 commit c5eb58b

47 files changed

Lines changed: 321 additions & 175 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,27 @@ ember-test-helpers-codemod --type=native-dom tests
3333

3434
This addon will perform the following transformations suitable for integration tests:
3535

36-
| Before | After | Transform |
37-
|------------------------------------------------------|---------------------------------------------------------------------------------------------|----------------|
38-
| `this.$('.foo').attr('id')` | `this.element.querySelector('.foo').id` | `attr.js` |
39-
| `this.$('.foo').attr('data-test')` | `this.element.querySelector('.foo').getAttribute('data-test')` | `attr.js` |
40-
| `this.$('.foo').click()` | `await click('.foo')` | `click.js` |
41-
| `this.$('.foo').change()` (and more events) | `await triggerEvent('.foo', 'change')` | `trigger-shortcut.js` |
42-
| `this.$('.foo').trigger('input')` | `await triggerEvent('.foo', 'input')` | `trigger.js` |
43-
| `this.$('.foo').focus()` | `await focus('.foo')` | `focus.js` |
44-
| `this.$('.foo').val()` | `this.element.querySelector('.foo').value` | `get-value.js` |
45-
| `this.$('div').hasClass('foo')` | `this.element.querySelector('div').classList.contains('foo')` | `has-class.js` |
46-
| `this.$('.foo').trigger('click')` | `await click('.foo')` | `key-event.js` |
47-
| `this.$('.foo').trigger('keydown', { keyCode: 13 })` | `await keyEvent('.foo', 'keydown', 13)` | `key-event.js` |
48-
| `this.$('.foo').length` | `this.element.querySelectorAll('.foo').length` | `length.js` |
49-
| `this.$('.foo').prop('tagName')` | `this.element.querySelector('.foo').tagName` | `prop.js` |
50-
| `this.$('.foo').val('foo')` | `await fillIn('.foo', 'foo')` | `set-value.js` |
51-
| `this.$('.foo').val('bar').change()` | `await fillIn('.foo', 'foo'); await blur('.foo');` | `set-value.js` |
52-
| `this.$('.foo').val('bar').trigger('input')` | `await fillIn('.foo', 'foo')` | `set-value.js` |
53-
| `this.$('.foo').text()` | `this.element.querySelector('.foo').textContent` | `text.js` |
54-
| `this.$('.foo').html()` | `this.element.querySelector('.foo').innerHTML` | `html.js` |
55-
| `this.$('.foo').html('foo')` | `this.element.querySelector('.foo').innerHTML = 'foo'` | `html.js` |
56-
| `this.$('.foo').each((index, elem) => {...})` | `this.element.querySelectorAll('.foo').forEach((elem, index) => {...})` | `each.js` |
36+
| Before | After | Transform |
37+
|------------------------------------------------------|-----------------------------------------------------------------------|----------------|
38+
| `this.$('.foo').attr('id')` | `find('.foo').id` | `attr.js` |
39+
| `this.$('.foo').attr('data-test')` | `find('.foo').getAttribute('data-test')` | `attr.js` |
40+
| `this.$('.foo').click()` | `await click('.foo')` | `click.js` |
41+
| `this.$('.foo').change()` (and more events) | `await triggerEvent('.foo', 'change')` | `trigger-shortcut.js` |
42+
| `this.$('.foo').trigger('input')` | `await triggerEvent('.foo', 'input')` | `trigger.js` |
43+
| `this.$('.foo').focus()` | `await focus('.foo')` | `focus.js` |
44+
| `this.$('.foo').val()` | `find('.foo').value` | `get-value.js` |
45+
| `this.$('div').hasClass('foo')` | `find('div').classList.contains('foo')` | `has-class.js` |
46+
| `this.$('.foo').trigger('click')` | `await click('.foo')` | `key-event.js` |
47+
| `this.$('.foo').trigger('keydown', { keyCode: 13 })` | `await keyEvent('.foo', 'keydown', 13)` | `key-event.js` |
48+
| `this.$('.foo').length` | `findAll('.foo').length` | `length.js` |
49+
| `this.$('.foo').prop('tagName')` | `find('.foo').tagName` | `prop.js` |
50+
| `this.$('.foo').val('foo')` | `await fillIn('.foo', 'foo')` | `set-value.js` |
51+
| `this.$('.foo').val('bar').change()` | `await fillIn('.foo', 'foo'); await blur('.foo');` | `set-value.js` |
52+
| `this.$('.foo').val('bar').trigger('input')` | `await fillIn('.foo', 'foo')` | `set-value.js` |
53+
| `this.$('.foo').text()` | `find('.foo').textContent` | `text.js` |
54+
| `this.$('.foo').html()` | `find('.foo').innerHTML` | `html.js` |
55+
| `this.$('.foo').html('foo')` | `find('.foo').innerHTML = 'foo'` | `html.js` |
56+
| `this.$('.foo').each((index, elem) => {...})` | `findAll('.foo').forEach((elem, index) => {...})` | `each.js` |
5757

5858

5959
If you want to run only selected transforms on your code, you can pick just the needed transform:
@@ -66,24 +66,24 @@ jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/integration/click.js
6666

6767
These transformations are available for acceptance tests:
6868

69-
| Before | After | Transform |
70-
|------------------------------------------------------|---------------------------------------------------------------------------------------------|----------------|
71-
| `find('.foo').attr('id')` | `this.element.querySelector('.foo').id` | `attr.js` |
72-
| `find('.foo').attr('data-test')` | `this.element.querySelector('.foo').getAttribute('data-test')` | `attr.js` |
73-
| `click('.foo')` | `await click('.foo')` | `click.js` |
74-
| `fillIn('#bar', 'baz')` | `await fillIn('#bar', 'baz')` | `fill-in.js` |
75-
| `triggerEvent('input', 'focus')` | `await focus('.foo')` | `trigger-event.js` |
76-
| `triggerEvent('input', 'blur')` | `await blur('.foo')` | `trigger-event.js` |
77-
| `triggerEvent('input', 'mouseenter')` | `await triggerEvent('input', 'mouseenter')` | `trigger-event.js` |
78-
| `find('.foo').val()` | `this.element.querySelector('.foo').value` | `get-value.js` |
79-
| `find('div').hasClass('foo')` | `this.element.querySelector('div').classList.contains('foo')` | `has-class.js` |
80-
| `keyEvent('#bar', 'keypress', 13);` | `await keyEvent('.foo', 'keydown', 13)` | `key-event.js` |
81-
| `find('.foo').length` | `this.element.querySelectorAll('.foo').length` | `length.js` |
82-
| `find('.foo').prop('tagName')` | `this.element.querySelector('.foo').tagName` | `prop.js` |
83-
| `find('.foo').text()` | `this.element.querySelector('.foo').textContent` | `text.js` |
84-
| `find('.foo').html()` | `this.element.querySelector('.foo').innerHTML` | `html.js` |
85-
| `find('.foo').html('foo')` | `this.element.querySelector('.foo').innerHTML = 'foo'` | `html.js` |
86-
| `find('.foo').each((index, elem) => {...})` | `this.element.querySelectorAll('.foo').forEach((elem, index) => {...})` | `each.js` |
69+
| Before | After | Transform |
70+
|------------------------------------------------------|-----------------------------------------------------------------------|----------------|
71+
| `find('.foo').attr('id')` | `find('.foo').id` | `attr.js` |
72+
| `find('.foo').attr('data-test')` | `find('.foo').getAttribute('data-test')` | `attr.js` |
73+
| `click('.foo')` | `await click('.foo')` | `click.js` |
74+
| `fillIn('#bar', 'baz')` | `await fillIn('#bar', 'baz')` | `fill-in.js` |
75+
| `triggerEvent('input', 'focus')` | `await focus('.foo')` | `trigger-event.js` |
76+
| `triggerEvent('input', 'blur')` | `await blur('.foo')` | `trigger-event.js` |
77+
| `triggerEvent('input', 'mouseenter')` | `await triggerEvent('input', 'mouseenter')` | `trigger-event.js` |
78+
| `find('.foo').val()` | `find('.foo').value` | `get-value.js` |
79+
| `find('div').hasClass('foo')` | `find('div').classList.contains('foo')` | `has-class.js` |
80+
| `keyEvent('#bar', 'keypress', 13);` | `await keyEvent('.foo', 'keydown', 13)` | `key-event.js` |
81+
| `find('.foo').length` | `findAll('.foo').length` | `length.js` |
82+
| `find('.foo').prop('tagName')` | `find('.foo').tagName` | `prop.js` |
83+
| `find('.foo').text()` | `find('.foo').textContent` | `text.js` |
84+
| `find('.foo').html()` | `find('.foo').innerHTML` | `html.js` |
85+
| `find('.foo').html('foo')` | `find('.foo').innerHTML = 'foo'` | `html.js` |
86+
| `find('.foo').each((index, elem) => {...})` | `findAll('.foo').forEach((elem, index) => {...})` | `each.js` |
8787

8888
If you want to run only selected transforms on your code, you can pick just the needed transform:
8989

@@ -95,10 +95,8 @@ jscodeshift -t ../ember-test-helpers-codemod/lib/transforms/acceptance/click.js
9595

9696
These transformations are available tests based on `ember-native-dom-helpers`:
9797

98-
| Before | After | Transform |
99-
|---------------------------------------|-----------------------------------------------|----------------|
100-
| `find('.foo')` | `this.element.querySelector('.foo')` | `find.js` |
101-
| `findAll('.foo')` | `this.element.querySelectorAll('.foo')` | `find.js` |
98+
| Before | After | Transform |
99+
|---------------------------------------|-------------------------|----------------|
102100
| ```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` |
103101

104102
If you want to run only selected transforms on your code, you can pick just the needed transform:

‎__testfixtures__/acceptance/attr.output.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import { find } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.equal(this.element.querySelector('.foo').id, 'foo');
8-
assert.equal(this.element.querySelector('.foo').getAttribute('data-test'), 'foo');
8+
assert.equal(find('.foo').id, 'foo');
9+
assert.equal(find('.foo').getAttribute('data-test'), 'foo');
910
});

‎__testfixtures__/acceptance/click.output.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { click, currentURL, visit } from '@ember/test-helpers';
1+
import { click, currentURL, findAll, visit } from '@ember/test-helpers';
22
import { test } from 'qunit';
33
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
44

@@ -8,6 +8,6 @@ test('visiting /foo', async function(assert) {
88
await visit('/foo');
99

1010
await click('#bar');
11-
await click(this.element.querySelectorAll('.baz a')[12]);
11+
await click(findAll('.baz a')[12]);
1212
assert.equal(currentURL(), '/foo');
1313
});

‎__testfixtures__/acceptance/each.output.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1+
import { findAll } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('anonymous function callback with two args', function(assert) {
7-
const elemIds = this.element.querySelectorAll('.button-class').forEach((element, index) => {
8+
const elemIds = findAll('.button-class').forEach((element, index) => {
89
assert.equal(element.id, `button${index}`);
910
});
1011
});
1112

1213
test('anonymous function callback with one arg', function(assert) {
13-
const elemIds = this.element.querySelectorAll('.button-class').forEach((element, index) => {
14+
const elemIds = findAll('.button-class').forEach((element, index) => {
1415
assert.equal(element.id, `button${index}`);
1516
});
1617
});
1718

1819
test('function callback with two args', function(assert) {
19-
const elemIds = this.element.querySelectorAll('.button-class').forEach(function(elem, i) {
20+
const elemIds = findAll('.button-class').forEach(function(elem, i) {
2021
assert.equal(element.id, `button${index}`);
2122
});
2223
});
2324

2425
test('function callback with one arg', function(assert) {
25-
const elemIds = this.element.querySelectorAll('.button-class').forEach((element, index) => {
26+
const elemIds = findAll('.button-class').forEach((element, index) => {
2627
assert.equal(element.id, `button${index}`);
2728
});
2829
});

‎__testfixtures__/acceptance/fill-in.output.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fillIn, currentURL, visit } from '@ember/test-helpers';
1+
import { fillIn, currentURL, findAll, visit } from '@ember/test-helpers';
22
import { test } from 'qunit';
33
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
44

@@ -8,6 +8,6 @@ test('visiting /foo', async function(assert) {
88
await visit('/foo');
99

1010
await fillIn('#bar', 'baz');
11-
await fillIn(this.element.querySelectorAll('#qux input')[5], 'qaaz');
11+
await fillIn(findAll('#qux input')[5], 'qaaz');
1212
assert.equal(currentURL(), '/foo');
1313
});

‎__testfixtures__/acceptance/get-value.output.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { find } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.equal(this.element.querySelector('.foo').value, 'foo');
8+
assert.equal(find('.foo').value, 'foo');
89
});

‎__testfixtures__/acceptance/has-class.output.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { find } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.ok(this.element.querySelector('.foo').classList.contains('foo'));
8+
assert.ok(find('.foo').classList.contains('foo'));
89
});

‎__testfixtures__/acceptance/html.output.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
import { find } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.equal(this.element.querySelector('.foo').innerHTML.trim(), '');
8+
assert.equal(find('.foo').innerHTML.trim(), '');
89

9-
this.element.querySelector('.foo').innerHTML = 'bar';
10+
find('.foo').innerHTML = 'bar';
1011

11-
assert.equal(this.element.querySelector('.foo').innerHTML.trim(), 'bar');
12+
assert.equal(find('.foo').innerHTML.trim(), 'bar');
1213
});

‎__testfixtures__/acceptance/length.output.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { findAll } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.equal(this.element.querySelectorAll('.foo').length, 1);
8+
assert.equal(findAll('.foo').length, 1);
89
});

‎__testfixtures__/acceptance/prop.output.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { find } from '@ember/test-helpers';
12
import { test } from 'qunit';
23
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
34

45
moduleForAcceptance('find');
56

67
test('visiting /foo', function(assert) {
7-
assert.equal(this.element.querySelector('.foo').tagName, 'DIV');
8+
assert.equal(find('.foo').tagName, 'DIV');
89
});

0 commit comments

Comments
 (0)