Skip to content

Commit ae48a75

Browse files
simonihmigsimonihmig
committed
Readme update
1 parent bbd093b commit ae48a75

1 file changed

Lines changed: 41 additions & 43 deletions

File tree

‎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:

0 commit comments

Comments
 (0)