{"id":13658216,"url":"https://github.com/ember-codemods/ember-test-helpers-codemod","last_synced_at":"2025-04-10T11:35:20.882Z","repository":{"id":44971672,"uuid":"119301348","full_name":"ember-codemods/ember-test-helpers-codemod","owner":"ember-codemods","description":"Codemod to transform your Ember tests to use @ember/test-helpers","archived":false,"fork":false,"pushed_at":"2022-01-15T06:12:39.000Z","size":431,"stargazers_count":29,"open_issues_count":7,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T12:58:21.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ember-codemods.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-28T21:54:22.000Z","updated_at":"2022-01-02T00:29:27.000Z","dependencies_parsed_at":"2022-09-26T17:11:34.077Z","dependency_job_id":null,"html_url":"https://github.com/ember-codemods/ember-test-helpers-codemod","commit_stats":null,"previous_names":["simonihmig/ember-test-helpers-codemod"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-codemods%2Fember-test-helpers-codemod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-codemods%2Fember-test-helpers-codemod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-codemods%2Fember-test-helpers-codemod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-codemods%2Fember-test-helpers-codemod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ember-codemods","download_url":"https://codeload.github.com/ember-codemods/ember-test-helpers-codemod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208689,"owners_count":21065205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:00:57.661Z","updated_at":"2025-04-10T11:35:15.863Z","avatar_url":"https://github.com/ember-codemods.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ember-test-helpers-codemod\n\n[![Build Status](https://travis-ci.org/ember-codemods/ember-test-helpers-codemod.svg?branch=master)](https://travis-ci.org/ember-codemods/ember-test-helpers-codemod)\n[![Build status](https://ci.appveyor.com/api/projects/status/fadn7iu9fl53qb6k/branch/master?svg=true)](https://ci.appveyor.com/project/simonihmig/ember-test-helpers-codemod/branch/master)\n[![npm version](https://badge.fury.io/js/ember-test-helpers-codemod.svg)](https://badge.fury.io/js/ember-test-helpers-codemod)\n\nA [jscodeshift](https://github.com/facebook/jscodeshift) based codemod to help migrating your jQuery or \n`ember-native-dom-helpers` based Ember tests to [`@ember/test-helpers`](https://github.com/emberjs/ember-test-helpers).\n\n*Please note that this will not be able to cover all possible cases how jQuery based tests can be written.\nGiven the dynamic nature of JavaScript and the extensive API and fluent interface of jQuery, this would be impossible.\nInstead this codemod focuses to cover the most common usages and do those transformations that it can safely do.\nSo it is likely that you will have to manually migrate some usages this tool cannot cover!*\n\n## Usage\n\n**WARNING**: `jscodeshift`, and thus this codemod, **edits your files in place**.\nIt does not make a copy. Make sure your code is checked into a source control\nrepository like Git and that you have no outstanding changes to commit before\nrunning this tool.\n\n```bash\ncd my-ember-app-or-addon\nnpx ember-test-helpers-codemod integration tests/integration\nnpx ember-test-helpers-codemod acceptance tests/acceptance\nnpx ember-test-helpers-codemod native-dom tests\n```\n\n## Transformations\n\n### Integration tests\n\nThis addon will perform the following transformations suitable for integration tests:\n\n| Before                                               | After                                                                 | Transform      |\n|------------------------------------------------------|-----------------------------------------------------------------------|----------------|\n| `this.$('.foo').attr('id')`                          | `find('.foo').id`                                                     | `attr.js`      |\n| `this.$('.foo').attr('data-test')`                   | `find('.foo').getAttribute('data-test')`                              | `attr.js`      |\n| `this.$('.foo').click()`                             | `await click('.foo')`                                                 | `click.js`     |\n| `this.$('.foo').change()` (and more events)          | `await triggerEvent('.foo', 'change')`                                | `trigger-shortcut.js` |\n| `this.$('.foo').trigger('input')`                    | `await triggerEvent('.foo', 'input')`                                 | `trigger.js`   |\n| `this.$('.foo').focus()`                             | `await focus('.foo')`                                                 | `focus.js`     |\n| `this.$('.foo').val()`                               | `find('.foo').value`                                                  | `get-value.js` |\n| `this.$('div').hasClass('foo')`                      | `find('div').classList.contains('foo')`                               | `has-class.js` |\n| `this.$('.foo').trigger('click')`                    | `await click('.foo')`                                                 | `key-event.js` |\n| `this.$('.foo').trigger('keydown', { keyCode: 13 })` | `await keyEvent('.foo', 'keydown', 13)`                               | `key-event.js` |\n| `this.$('.foo').length`                              | `findAll('.foo').length`                                              | `length.js`    |\n| `this.$('.foo').prop('tagName')`                     | `find('.foo').tagName`                                                | `prop.js`      |\n| `this.$('.foo').val('foo')`                          | `await fillIn('.foo', 'foo')`                                         | `set-value.js` |\n| `this.$('.foo').val('bar').change()`                 | `await fillIn('.foo', 'foo'); await blur('.foo');`                    | `set-value.js` |\n| `this.$('.foo').val('bar').trigger('input')`         | `await fillIn('.foo', 'foo')`                                         | `set-value.js` |\n| `this.$('.foo').text()`                              | `find('.foo').textContent`                                            | `text.js`      |\n| `this.$('.foo').html()`                              | `find('.foo').innerHTML`                                              | `html.js`      |\n| `this.$('.foo').html('foo')`                         | `find('.foo').innerHTML = 'foo'`                                      | `html.js`      |\n| `this.$('.foo').each((index, elem) =\u003e {...})`        | `findAll('.foo').forEach((elem, index) =\u003e {...})`                     | `each.js`      |\n| `this.$('.foo').get(3)`                              | `findAll('.foo')[3]`                                                  | `get.js`     |\n\n\nIf you want to run only selected transforms on your code, you can pick just the needed transform:\n\n```bash\njscodeshift -t path/to/ember-test-helpers-codemod/transforms/integration/transforms/click.js tests/integration\n```\n\nSee also docs for [`integration` transform](transforms/integration).\n\n### Acceptance tests\n\nThese transformations are available for acceptance tests:\n\n| Before                                               | After                                                                 | Transform      |\n|------------------------------------------------------|-----------------------------------------------------------------------|----------------|\n| `find('.foo').attr('id')`                            | `find('.foo').id`                                                     | `attr.js`      |\n| `find('.foo').attr('data-test')`                     | `find('.foo').getAttribute('data-test')`                              | `attr.js`      |\n| `click('.foo')`                                      | `await click('.foo')`                                                 | `click.js`     |\n| `fillIn('#bar', 'baz')`                              | `await fillIn('#bar', 'baz')`                                         | `fill-in.js`   |\n| `triggerEvent('input', 'focus')`                     | `await focus('.foo')`                                                 | `trigger-event.js` |\n| `triggerEvent('input', 'blur')`                      | `await blur('.foo')`                                                  | `trigger-event.js` |\n| `triggerEvent('input', 'mouseenter')`                | `await triggerEvent('input', 'mouseenter')`                           | `trigger-event.js` |\n| `find('.foo').val()`                                 | `find('.foo').value`                                                  | `get-value.js` |\n| `find('div').hasClass('foo')`                        | `find('div').classList.contains('foo')`                               | `has-class.js` |\n| `keyEvent('#bar', 'keypress', 13);`                  | `await keyEvent('.foo', 'keydown', 13)`                               | `key-event.js` |\n| `find('.foo').length`                                | `findAll('.foo').length`                                              | `length.js`    |\n| `find('.foo').prop('tagName')`                       | `find('.foo').tagName`                                                | `prop.js`      |\n| `find('.foo').text()`                                | `find('.foo').textContent`                                            | `text.js`      |\n| `find('.foo').html()`                                | `find('.foo').innerHTML`                                              | `html.js`      |\n| `find('.foo').html('foo')`                           | `find('.foo').innerHTML = 'foo'`                                      | `html.js`      |\n| `find('.foo').each((index, elem) =\u003e {...})`          | `findAll('.foo').forEach((elem, index) =\u003e {...})`                     | `each.js`      |\n| `find('.foo').get(3)`                                | `findAll('.foo')[3]`                                                  | `get.js`     |\n\nIf you want to run only selected transforms on your code, you can pick just the needed transform:\n\n```bash\njscodeshift -t ../ember-test-helpers-codemod/transforms/acceptance/transforms/click.js tests/integration\n```\n\nSee also docs for [`acceptance` transform](transforms/acceptance).\n\n### ember-native-dom-helpers tests\n\nThese transformations are available for tests based on `ember-native-dom-helpers`:\n\n| Before                                | After                   | Transform      |\n|---------------------------------------|-------------------------|----------------|\n| ```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';``` |\n| `find('.foo', context)`                      | `context.querySelector('.foo')`                            |\n| `find('.foo', '.context')`                   | `find('.context .foo')`                                    |\n| `findAll('.foo', context)`                   | `context.querySelectorAll('.foo')`                         |\n| `click('.foo', context)`                     | `click(context.querySelector('.foo'))`                     |\n| `click('.foo', context, { shiftKey: true })` | `click(context.querySelector('.foo'), { shiftKey: true })` |\n\nSee also docs for [`native-dom` transform](transforms/native-dom).\n\n### Replace find/findAll\n\nBy default this codemod will use the `find()` and `findAll()` helpers from `@ember/test-helpers` where required. \nIf you want to use the native query functions `this.element.querySelector()` / `this.element.querySelectorAll()` instead, \nyou can use the `find.js` transform after you have run the other transformations:\n\n```bash\nnpx ember-test-helpers-codemod find tests\n```\n\n| Before               | After                                   | Transform      |\n|----------------------|-----------------------------------------|----------------|\n| `find('.foo')`       | `this.element.querySelector('.foo')`    | `find.js`      |\n| `findAll('.foo')`    | `this.element.querySelectorAll('.foo')` | `find.js`      |\n\nNote that this will require all instances of `find`/`findAll` to have the correct `this` context, otherwise you will run\ninto `Cannot read property 'querySelector' of undefined` exceptions, as `this.element` will not be defined. This can \nhappen outside of the main `test` function, for example inside of custom test helper functions.\n\nSee also docs for [`find` transform](transforms/find).\n\n### Replace deprecated `ember-test-helpers` package\n\nReplace all imports of `ember-test-helpers` to `@ember/test-helpers`. \n\nSee docs for [`ember-test-helper-api-migration` transform](transforms/ember-test-helper-api-migration).\n\n### Replace deprecated `this.render()` with `render()`\n\nReplace all uses of `this.render()` with `render()`.\n\nSee docs for [`this-render-migration` transform](transforms/this-render-migration).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-codemods%2Fember-test-helpers-codemod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fember-codemods%2Fember-test-helpers-codemod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-codemods%2Fember-test-helpers-codemod/lists"}