ember-qunit | QUnit test helpers for Ember | Addon library
kandi X-RAY | ember-qunit Summary
Support
Quality
Security
License
Reuse
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
ember-qunit Key Features
ember-qunit Examples and Code Snippets
Lines of Code : 59License : Permissive (MIT)
Copy
// app/app.js import defineModifier from 'ember-concurrency-test-waiter/define-modifier'; defineModifier(); // remainder of app.js...
// app/components/image-size.js import Component from '@ember/component'; import { Promise } from 'rsvp'; import { run } from '@ember/runloop'; import { task } from 'ember-concurrency'; export default Component.extend({ src: null, dimensions: null, init() { this._super(...arguments); this.computeDimensions.perform(this.src); }, computeDimensions: task(function*(src) { let { width, height } = yield new Promise((resolve, reject) => { let image = new Image(); image.addEventListener('load', () => resolve(img)); image.addEventListener('error', reject); image.src = src; }); this.set('dimensions', { width, height }); }).restartable().withTestWaiter() });
{{! app/templates/components/image-size.hbs }} {{#if this.dimensions}} dimensions: {{this.dimensions.width}}x{{this.dimensions.height}} {{else}} loading... {{/if}}
// tests/integration/components/image-size.js import { A } from '@ember/array'; import { run } from '@ember/runloop'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit' import hbs from 'htmlbars-inline-precompile'; import { render, settled } from '@ember/test-helpers'; module('image-size', 'Integration | Component | image-size', function(hooks) { setupRenderingTest(hooks); test('it works', async function(assert) { assert.expect(2); await render(hbs``); // render() awaits settled(), which will now wait for computeDimensions // to complete before resolving assert.dom(this.element).hasText("200x350"); }); });// Watch out, this test is written with the latest ember-qunit syntax which might not be exactly what you have in your Ember 2.16 application
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from 'ember-test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('your component integration tests', function(hooks) {
setupRenderingTest(hooks);
test('clicking the OK confirm button', async function(assert) {
// save the original window.confirm implementation
const originalWindowConfirm = window.confirm;
// simulate the OK button clicked
window.confirm = function() { return true;}
// ADD YOUR TEST AND ASSERTIONS HERE
// restore the original window.confirm implementation
window.confirm = originalWindowConfirm;
});
});
Trending Discussions on ember-qunit
Trending Discussions on ember-qunit
QUESTION
The pauseTest() function from ember-qunit does not work as expected in Integration tests with the old syntax
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('my-component, 'Integration | Component | MyComponent', {
integration: true
});
test('it renders', function(assert) {
return pauseTest();
this.render(hbs`{{my-component}}/>`);
...
}
Failed:
Died on test #1 at Module.callback (http://localhost:4200/assets/tests.js:118959:24)
at Module.exports (http://localhost:4200/assets/vendor.js:111:32)
at requireModule (http://localhost:4200/assets/vendor.js:32:18)
at EmberExamQUnitTestLoader. (http://localhost:4200/assets/test-support.js:29031:11)
at EmberExamQUnitTestLoader.require (http://localhost:4200/assets/test-support.js:29021:27)
at http://localhost:4200/assets/test-support.js:29545:90
at Array.forEach (): pauseTest is not defined@ 698 ms
Source:
ReferenceError: pauseTest is not defined
at Object. (http://localhost:4200/assets/tests.js:118960:5)
at runTest (http://localhost:4200/assets/test-support.js:20889:30)
at Test.run (http://localhost:4200/assets/test-support.js:20875:6)
at http://localhost:4200/assets/test-support.js:21096:12
at advanceTaskQueue (http://localhost:4200/assets/test-support.js:20488:6)
at Object.advance (http://localhost:4200/assets/test-support.js:20469:4)
at begin (http://localhost:4200/assets/test-support.js:22241:20)
at http://localhost:4200/assets/test-support.js:21483:6
It's working fine in Acceptance tests, because of:
// ./tests/helpers/start-app.js
export default function startApp(attrs) {
...
application.injectTestHelpers();
...
}
How to make it works in Integration tests?
Note: In modern syntax, it's working fine too:
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | MyComponent', function(hooks) {
test('it renders', async function(assert) {
return this.pauseTest();
await render(hbs`{{my-component}}/>`);
});
}
ANSWER
Answered 2020-Nov-19 at 19:17workaround:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import Ember from 'ember';
moduleForComponent('my-component, 'Integration | Component | MyComponent', {
integration: true
});
test('it renders', function(assert) {
return Ember.Test._helpers.pauseTest.method();
this.render(hbs`{{my-component}}/>`);
...
}
QUESTION
I just started using Ember. I already had some trouble with the Ember Quickstart tutorial which describes that hbs and js files for components should both be put in app/components. The only way it works on my machine is with the js file in app/components, but the hbs file in app/templates/components. That's also what ember generate component people-list did.
Now, there's another problem: The first line in people-list.js is
import Component from '@glimmer/component';
This causes the error Could not find module @glimmer/component imported from ember-quickstart/components/people-list. There is no build error, but the component's content does not render. What can I do about this?
edit 1: In my other question, Ember Octane was mentioned. This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
edit 2 Below is my package.json after adding glimmer. I could run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"@ember/jquery": "^0.5.2",
"@ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"@glimmer/component": "^1.0.0"
}
}
Now the problem described above is gone, instead I get Parsing error: Unexpected character '@' in line 5 of people-list.js:
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class PeopleListComponent extends Component {
@action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
ANSWER
Answered 2020-May-14 at 14:36Please ensure that "@glimmer/component": "^1.0.0" line exists in your package.json. Then rerun npm install or yarn install and restart ember s. This should be there if you had used ember new with Ember 3.14+, but it seems like it might be missing.
QUESTION
I have installed tinymce in my EmberJS application. When I run npm start or even npm run build, I get an error like so:
[Package /assets/vendor.js]/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:98681
throw e;
Error: Debug Failure.
at Object.assertDefined (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:2227:24)
at /home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39474:34
at Object.filter (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:513:31)
at serializeAsClass (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39472:48)
at serializeSymbolWorker (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39203:29)
at serializeSymbol (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39144:38)
at /home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39119:25
at Map.forEach ()
at visitSymbolTable (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:39118:33)
at symbolTableToDeclarationStatements (/home/ikirkpat/Projects/proj_name/frontend/node_modules/typescript/lib/typescript.js:38989:17)
⠧ building... [SassCompiler](node:14526) UnhandledPromiseRejectionWarning: Error: Debug Failure.
at CommandCoordinator.dispatchResponse (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:54:69)
at CommandCoordinator. (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:43:29)
at Generator.next ()
at /home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:7:71
at new Promise ()
at __awaiter (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:3:12)
at CommandCoordinator.messageReceived (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:40:16)
at ChildProcess.emit (events.js:311:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)
(node:14526) UnhandledPromiseRejectionWarning: Error: Debug Failure.
at CommandCoordinator.dispatchResponse (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:54:69)
at CommandCoordinator. (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:43:29)
at Generator.next ()
at /home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:7:71
at new Promise ()
at __awaiter (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:3:12)
at CommandCoordinator.messageReceived (/home/ikirkpat/Projects/proj_name/frontend/node_modules/stagehand/lib/command-coordinator.js:40:16)
at ChildProcess.emit (events.js:311:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)
(node:14526) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 15)
For background, this was building perfectly before. Then I merged my teams master branch into my feature branch to fix merge conflicts and now it won't build.
So here is my package.json:
{
"name": "...",
"version": "0.0.0",
"private": true,
"description": "...",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"codegen": "graphql-codegen",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve --ssl --secure-proxy false --proxy https://localhost:5001 --environment local",
"test": "ember test"
},
"devDependencies": {
"@ember/edition-utils": "^1.1.1",
"@ember/jquery": "^1.1.0",
"@ember/optional-features": "^1.1.0",
"@glimmer/component": "^1.0.0",
"@types/ember": "^3.1.1",
"@types/ember-qunit": "^3.4.7",
"@types/ember__test-helpers": "^0.7.9",
"@types/qunit": "^2.9.0",
"@types/rsvp": "^4.0.3",
"apollo-link-error": "^1.1.12",
"babel-eslint": "^10.0.2",
"broccoli-asset-rev": "^3.0.0",
"ember-animated": "^0.9.0",
"ember-apollo-client": "2.0.0",
"ember-auto-import": "^1.5.3",
"ember-cli": "~3.15.1",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.13.0",
"ember-cli-dependency-checker": "^3.2.0",
"ember-cli-deploy": "^1.0.2",
"ember-cli-deploy-build": "^2.0.0",
"ember-cli-deploy-s3": "^1.4.0",
"ember-cli-htmlbars": "^4.2.0",
"ember-cli-inject-live-reload": "^2.0.1",
"ember-cli-sass": "^10.0.1",
"ember-cli-sri": "^2.1.1",
"ember-cli-typescript": "^3.1.1",
"ember-cli-typescript-blueprints": "^3.0.0",
"ember-cli-uglify": "^3.0.0",
"ember-cli-update": "^0.49.6",
"ember-css-modules": "^1.3.0-beta.1",
"ember-css-modules-sass": "^1.0.1",
"ember-drag-drop": "atomicobject/ember-drag-drop#feature/horizontal-sorting-improvements",
"ember-export-application-global": "^2.0.1",
"ember-fetch": "^7.0.0",
"ember-intl": "^4.2.2",
"ember-load-initializers": "^2.1.1",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-paper": "^1.0.0-beta.26",
"ember-qunit": "^4.6.0",
"ember-resolver": "^7.0.0",
"ember-source": "https://s3.amazonaws.com/builds.emberjs.com/beta/shas/49ae818907447d9c469d68b297060f00728ffb5a.tgz",
"ember-template-lint": "^1.5.0",
"ember-test-selectors": "^2.1.0",
"ember-tooltips": "^3.4.2",
"ember-welcome-page": "^4.0.0",
"ember-wormhole": "^0.5.5",
"eslint": "^6.1.0",
"eslint-plugin-ember": "^7.7.1",
"eslint-plugin-node": "^10.0.0",
"graphql": "^14.5.8",
"liquid-fire": "^0.31.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.9.2",
"sass": "^1.23.3",
"typescript": "^3.7.2"
},
"engines": {
"node": "8.* || >= 10.*"
},
"ember": {
"edition": "octane"
},
"dependencies": {
"@ember/render-modifiers": "^1.0.2",
"@glimmer/tracking": "^0.14.0-alpha.1",
"@graphql-codegen/cli": "^1.9.1",
"@graphql-codegen/near-operation-file-preset": "^1.9.1",
"@graphql-codegen/typescript": "^1.9.1",
"@graphql-codegen/typescript-compatibility": "^1.9.1",
"@graphql-codegen/typescript-operations": "^1.9.1",
"@simple-dom/interface": "^1.4.0",
"@types/faker": "^4.1.8",
"@types/lodash-es": "^4.17.3",
"@types/tinymce": "^4.5.24",
"apollo-cache-inmemory": "^1.6.3",
"apollo-link": "^1.2.13",
"apollo-link-batch-http": "^1.2.13",
"bufferutil": "^4.0.1",
"cldr-core": "^36.0.0",
"ember-click-outside": "^1.3.0",
"ember-concurrency-decorators": "^1.0.0",
"ember-file-upload": "^2.7.1",
"ember-hacky-set-value": "0.0.1",
"es6-promise": "^4.2.8",
"faker": "^4.1.0",
"isomorphic-fetch": "^2.2.1",
"lodash-es": "^4.17.15",
"moment": "^2.24.0",
"tinymce": "^5.2.1"
}
}
It was builing until the ember-hacky-set-value package was introduced so I wonder if that's the problem. But that seems like a completely unrelated change that shouldn't have effected tinymce. So maybe it's something else?
ANSWER
Answered 2020-Apr-10 at 13:56You just need to change line "typescript": "^3.7.2" -> "typescript": "~3.7.2"
Somehow your typescript got updated to 3.8, which has this issue: https://github.com/typed-ember/ember-cli-typescript/issues/1103
QUESTION
I am writing unit tests in Ember-qunit. I want to set a custom value on performance.now.
I tried sinon.stub(performance,'now', 60000); but this didn't work. I get TypeError: stub(obj, 'meth', fn) has been removed.
how do i stub performance.now() using sinon.js?
Thanks
ANSWER
Answered 2020-Mar-20 at 20:56Not sure what your third argument (60000) is supposed to be as I am not familiar with performance.now(), but that's not a valid call to Sinon.stub() (there is no 3rd parameter). Per the documentation though, you should be able to capture the stub function and then call a method on it to indicate the desired return value:
const stub = sinon.stub(performance, 'now');
stub.returns(60000);
Then, when the stub is called, you should get:
console.log( stub() ); // 60000
You can see this functionality in this jsfiddle example.
QUESTION
Having the following controller and tests:
app/controllers/application.js
import Controller from '@ember/controller';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
flag = false;
@action
raiseFlag() {
this.flag = true;
}
@action
async raiseFlagAsync() {
await new Promise(resolve => setTimeout(resolve, 1000));
this.flag = true;
}
}
tests/unit/controllers/application-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Controller | application', function(hooks) {
setupTest(hooks);
test('it raises flag', function(assert) {
let controller = this.owner.lookup('controller:application');
assert.equal(controller.flag, false);
controller.send('raiseFlag');
assert.equal(controller.flag, true);
});
test('it raises flag asyncronously', async function(assert) {
let controller = this.owner.lookup('controller:application');
assert.equal(controller.flag, false);
await controller.send('raiseFlagAsync');
assert.equal(controller.flag, true);
});
});
The first test case passes. The second test case fails (the async one)
What is the ember-octane way of waiting for the async action?
ANSWER
Answered 2020-Jan-23 at 15:09Not sure why it was so hard to find this information, maybe bad SEO.
import { waitUntil } from '@ember/test-helpers';
test('it raises flag asyncronously', async function(assert) {
let controller = this.owner.lookup('controller:application');
assert.equal(controller.flag, false);
controller.send('raiseFlagAsync');
await waitUntil(() => controller.flag === true);
});
If anyone comes up with a more ember-ish answer I'll accept that once instead
QUESTION
- Ember-CLI:- 3.4.3
- Node:- 6.9.5
- Yarn:- 1.9.4
During the deployment of my ember project on Heroku, I got this error here is log. We have find-up version 3.0.0 but during deployment, it is still trying to download find-up@4.1.0 if anyone have an idea about this to ignore download of the latest version of find-up or any solution so comment it here it will be very helpful thanks in advance.
error find-up@4.1.0: The engine "node" is incompatible with this module. Expected version ">=8".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
! Push rejected, failed to compile Ember CLI app.
! Push failed
Here is my Package.json
{
"name": "tabsys-client",
"version": "2.13.1",
"private": true,
"description": "Web and mobile client for Activate Universal",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:js": "eslint ./*.js app config lib server tests",
"start": "ember serve",
"test": "ember test",
"postinstall": "node -e \"try { require('fs').symlinkSync(require('path').resolve('node_modules/@bower_components'), 'bower_components', 'junction') } catch (e) { }\""
},
"dependencies": {
"@bower_components/FakeXMLHttpRequest": "trek/FakeXMLHttpRequest#^1.4.0",
"@bower_components/Faker": "Marak/Faker.js#~3.1.0",
"@bower_components/d3": "mbostock-bower/d3-bower#^4.11.0",
"@bower_components/d3-tip": "Caged/d3-tip#^0.7.1",
"@bower_components/dexie": "dfahlander/dexie.js#^2.0.0-beta.11",
"@bower_components/dialog-polyfill": "GoogleChrome/dialog-polyfill#^0.4.7",
"@bower_components/ember-qunit-notifications": "dockyard/ember-qunit-notifications#0.1.0",
"@bower_components/highcharts-custom-events": "blacklabel/custom_events#2.1.4",
"@bower_components/leaflet": "Leaflet/Leaflet#^1.0.0",
"@bower_components/material-design-lite": "google/material-design-lite#^1.2.1",
"@bower_components/pretender": "trek/pretender#~1.1.0",
"@bower_components/qunit-notifications": "dockyard/qunit-notifications#~0.1.0",
"@bower_components/route-recognizer": "tildeio/route-recognizer#~0.1.1",
"@bower_components/sauce-material-design": "sauce-consultants/sauce-material-design#1.0.0rc8",
"ember-cli": "^3.4.3",
"object.values": "^1.0.4",
"replace": "^1.1.1"
},
"devDependencies": {
"broccoli-asset-rev": "^2.4.5",
"broccoli-funnel": "2.0.1",
"corber": "1.3.10",
"ember-ajax": "^3.0.0",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-clock": "2.1.1",
"ember-cli-dotenv": "^2.0.0",
"ember-cli-eslint": "^4.2.1",
"ember-cli-fastclick": "1.3.0",
"ember-cli-favicon": "1.0.0-beta.4",
"ember-cli-geo": "^4.0.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-moment-shim": "3.3.1",
"ember-cli-nouislider": "^0.14.1",
"ember-cli-qunit": "^4.1.1",
"ember-cli-release": "^1.0.0-beta.2",
"ember-cli-sass": "7.1.3",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.0.0",
"ember-composability": "0.3.7",
"ember-concurrency": "0.7.17",
"ember-cordova-events": "0.1.0",
"ember-cordova-platform": "^0.1.0",
"ember-cordova-splash": "0.1.4",
"ember-crumbly": "2.0.0-alpha.1",
"ember-data": "~2.18.0",
"ember-data-url-templates": "0.2.0",
"ember-drag-drop": "^0.6.2",
"ember-export-application-global": "^2.0.0",
"ember-file-upload": "2.0.0-beta.24",
"ember-highcharts": "0.5.4",
"ember-i18n": "5.0.2",
"ember-inflector": "2.0.1",
"ember-leaflet": "3.0.9",
"ember-load-initializers": "^1.0.0",
"ember-local-storage": "^1.4.0",
"ember-lodash": "^4.17.5",
"ember-material-lite": "0.2.5",
"ember-md5": "^1.2.0",
"ember-modal-dialog": "^2.4.1",
"ember-moment": "7.0.0-beta.3",
"ember-new-computed": "1.0.3",
"ember-pikaday": "2.2.2",
"ember-power-select": "1.9.6",
"ember-radio-button": "1.0.7",
"ember-resolver": "^4.0.0",
"ember-route-action-helper": "2.0.6",
"ember-sauce-material-design": "sauce-consultants/ember-sauce-material-design.git#1.0.0rc18",
"ember-sauce-toolkit": "sauce-consultants/ember-sauce-toolkit#0.1.5",
"ember-select-box": "1.1.14",
"ember-service-worker": "0.6.6",
"ember-service-worker-asset-cache": "0.6.1",
"ember-service-worker-index": "0.6.1",
"ember-sortable": "1.9.3",
"ember-source": "~2.18.0",
"ember-tether": "^1.0.0-beta.0",
"ember-truth-helpers": "2.0.0",
"ember-web-app": "^2.0.0",
"ember-welcome-page": "^3.0.0",
"emberx-file-input": "^1.1.2",
"eslint-plugin-ember": "^5.0.0",
"highcharts": "^7.0.0",
"liquid-fire": "0.27.3",
"loader.js": "^4.5.0",
"pikaday": "1.6.1",
"smd-colors": "sauce-consultants/smd-colors.git#25e787d8a85af98c60ec3482e0534ea8aaab1208",
"torii": "0.9.3"
},
"engines": {
"node": "6.9.5",
"yarn": "1.9.4"
}
}
ANSWER
Answered 2020-Jan-06 at 14:28Yarn tells you that the npm package find-up is expecting a Node version greater or equal 8. Accordingly to your question you are using Node 6.
End of life for node 6 was on 30 April 2019. Even Node 8 not supported anymore since end of last year.
You should upgrade to a supported version of Node to resolve that issue. Node 10 and 12 are active LTS versions. Node 13 is the current latest release. You could find an overview of Node versions and their support at https://github.com/nodejs/Release.
QUESTION
I recently upgraded an Ember app from 2.18 to 3.13 which went smoothly. Today I tried to add an acceptance test for the first time (only had integration / unit tests before this) but the test is failing on the first line:
import { module, test } from "qunit";
import { visit, currentURL } from "@ember/test-helpers";
import { setupApplicationTest } from "ember-qunit";
module("Acceptance | some route", function(hooks) {
setupApplicationTest(hooks);
test("visiting /some-route", async function(assert) {
await visit("/some-route"); // <----- error thrown here
assert.equal(currentURL(), "/some-route");
});
});
I'm seeing a couple errors (in this order):
Source:
TypeError: Cannot read property 'lookup' of undefined
at Object.initialize (http://localhost:4200/assets/my-app.js:10312:28)
at http://localhost:4200/assets/vendor.js:61627:21
at Vertices.each (http://localhost:4200/assets/vendor.js:80243:9)
at Vertices.walk (http://localhost:4200/assets/vendor.js:80157:12)
at DAG.each (http://localhost:4200/assets/vendor.js:80087:22)
at DAG.topsort (http://localhost:4200/assets/vendor.js:80095:12)
at Class._runInitializer (http://localhost:4200/assets/vendor.js:61653:13)
at Class.runInitializers (http://localhost:4200/assets/vendor.js:61625:12)
at Class._bootSync (http://localhost:4200/assets/vendor.js:59923:14)
at Class.boot (http://localhost:4200/assets/vendor.js:59890:14)
Source:
Error: Cannot call `visit` without having first called `setupApplicationContext`.
at visit (http://localhost:4200/assets/test-support.js:44177:13)
at Object._callee$ (http://localhost:4200/assets/tests.js:23:47)
at tryCatch (http://localhost:4200/assets/vendor.js:12365:40)
at Generator.invoke [as _invoke] (http://localhost:4200/assets/vendor.js:12591:22)
at Generator.prototype. [as next] (http://localhost:4200/assets/vendor.js:12417:21)
at asyncGeneratorStep (http://localhost:4200/assets/tests.js:6:105)
at _next (http://localhost:4200/assets/tests.js:8:196)
at http://localhost:4200/assets/tests.js:8:366
at new Promise ()
at Object. (http://localhost:4200/assets/tests.js:8:99)
After a little digging, it looks like something is setting the test context incorrectly. It's just an empty object:
Thus, isApplicationTestContext(context) returns false and the second error gets thrown. I'm guessing the first error is thrown because the app has some initializers that perform lookups.
In an effort to add this acceptance test I also updated the test-helper.js file to the following:
import Application from "../app";
import config from "../config/environment";
import { setApplication } from "@ember/test-helpers";
import { start } from "ember-qunit";
setApplication(Application.create(config.APP));
start();
With the above file, all tests are failing so it seems that setApplication is causing the test context to be set incorrectly? The old test-helper.js file was like so:
import resolver from "./helpers/resolver";
import { setResolver } from "@ember/test-helpers";
import { start } from "ember-cli-qunit";
setResolver(resolver);
start();
I've tried re-adding the setResolver call but it doesn't make a difference. Has anyone else run into these issues with the new ember-qunit syntax or could maybe see what I'm doing wrong? Also, I've set autoboot = false; in the environment.js file which didn't make a difference. The test suite also has one or two tests that are still written in the older ember-qunit syntax. Any help would be appreciated!
ANSWER
Answered 2019-Oct-04 at 22:55First, some back story:
Our application utilizes a 3rd party library for metrics and another 3rd party library for feature flags. Each library has its own service but we need the metrics service to be initialized before the feature flag service can be initialized because we want to link the analytic user data to get the right feature flags for each user. The feature flag checks are done all throughout the application so a race condition arose between when a feature flag check would occur and when the analytics file was loaded in a script tag on the webpage.
Now the solution:
The reason why this error was popping up:
Source:
TypeError: Cannot read property 'lookup' of undefined
at Object.initialize (http://localhost:4200/assets/my-app.js:10312:28)
at http://localhost:4200/assets/vendor.js:61627:21
at Vertices.each (http://localhost:4200/assets/vendor.js:80243:9)
at Vertices.walk (http://localhost:4200/assets/vendor.js:80157:12)
at DAG.each (http://localhost:4200/assets/vendor.js:80087:22)
at DAG.topsort (http://localhost:4200/assets/vendor.js:80095:12)
at Class._runInitializer (http://localhost:4200/assets/vendor.js:61653:13)
at Class.runInitializers (http://localhost:4200/assets/vendor.js:61625:12)
at Class._bootSync (http://localhost:4200/assets/vendor.js:59923:14)
at Class.boot (http://localhost:4200/assets/vendor.js:59890:14)
is because the application has an application initializer that was utilizing private Ember APIs to perform a lookup from the container. The initializer was performing a lookup to implicitly initialize the metrics service before retrieving analytic data and then initializing the feature flag service.
export function initialize(application) {
const container = application.__container__; // <-- undefined
const lookup = container.lookup.bind(application.__container__); // <-- error!
...
}
What's strange is the above code works in the development and production environments. This change seems to be a result of the deprecations / rearrangement of internal Ember APIs particularly related to the container. See this page for more information.
In order to access the container in an application initializer it must be done from an application instance (i.e., an instance initializer). This might have been an acceptable solution, but I wasn't 100% sure if we could defer application readiness from an application instance initializer.
For more reading on the application instance initializers, see here.
Instead the code was moved to the application route's beforeModel() hook. I also added an instance initializer for the metrics service which resulted in a faster application load time.
After moving the initializer code to the application route the application is now being built successfully and acceptance tests work like a charm. :)
QUESTION
I am quite new to ember.js. I have been working on the tutorial and having issue with generating adapter application.
When i run the command ember generate adapter application i can see message saying installing adapter and installing adapter-test but no file is getting generated in the folder structure .
Package.json
{
"name": "super-rentals",
"version": "0.0.0",
"private": true,
"description": "Small description for super-rentals goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"@ember/jquery": "^0.6.0",
"@ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-cli": "~3.11.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-mirage": "^0.4.15",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-tutorial-style": "^3.1.0",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.11.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^2.0.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^4.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.11.1",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.4"
},
"engines": {
"node": "8.* || >= 10.*"
}
}ANSWER
Answered 2019-Jul-23 at 07:48Ola @Divakar, thanks for your question! And Welcome to Ember
Looking at your question it seems like it could be related to an issue that we had recently in ember-data where the generators were broken. I think they were fixed in ember-data@3.11.1 but from your package.json it would seem that you have ember-data@3.11.0
If you want to update ember-data and see if the issue is still there you can run the following:
npm i ember-data@latest
Also @Lux was asking if other generators work, the examples that you gave were all related to ember-data so there is a possibility that they were all affected by the same bug. If updating ember-data doesn't fix your issue can you try generating a route or a controller and see if they work
Edit: I have just run into this same issue with an up-to-date Ember app and I can confirm that it is not fixed yet.
For now you can get this working by creating the files yourself. For an the application adapter you can create the file app/adapters/application.js and paste this in the file:
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
});
If you want to build a model you can create a file in models with the name you want. For example you can create app/models/rental.js and put this in it:
import DS from 'ember-data';
export default DS.Model.extend({
});
If you create those files manually they will be almost exactly what you would have seen if you created them with the generator
QUESTION
I am quite new to ember.js project where i am trying to write my first acceptance test for testing my root path works. I am following the below tutorial . I was unable to import "module-for-acceptance" from the helpers as its deprecated. when i run the below test i am getting an error which says (0 , _testHelpers.andThen) is not a function. I had also gone through ember js discussion post and imported andThen. It does not seem to work . How can i import andThen and make my test work . Thank you.
Test case
import { module, test } from 'qunit';
import { visit, currentURL ,andThen } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
module('Acceptance | list rentals', function(hooks) {
setupApplicationTest(hooks);
test('should redirect to rentals route', function (assert) {
visit('/');
andThen(function() {
assert.equal(currentURL(), '/rentals', 'should redirect automatically');
});
});
});Log
Died on test #1 at Object. (http://localhost:7357/assets/tests.js:8:21)
at processModule (http://localhost:7357/assets/test-support.js:3765:16)
at module$1 (http://localhost:7357/assets/test-support.js:3790:4)
at Module.callback (http://localhost:7357/assets/tests.js:6:21)
at Module.exports (http://localhost:7357/assets/vendor.js:111:32)
at requireModule (http://localhost:7357/assets/vendor.js:32:18)
at TestLoader.require (http://localhost:7357/assets/test-support.js:13736:9): (0 , _testHelpers.andThen) is not a function@ 60 ms
Source:
TypeError: (0 , _testHelpers.andThen) is not a function
at Object. (http://localhost:7357/assets/tests.js:10:32)
at runTest (http://localhost:7357/assets/test-support.js:5618:30)
at Test.run (http://localhost:7357/assets/test-support.js:5604:6)
at http://localhost:7357/assets/test-support.js:5831:12
at processTaskQueue (http://localhost:7357/assets/test-support.js:5197:24)
at advanceTaskQueue (http://localhost:7357/assets/test-support.js:5182:4)
at Object.advance (http://localhost:7357/assets/test-support.js:5168:4)
at unblockAndAdvanceQueue (http://localhost:7357/assets/test-support.js:6944:20)
at begin (http://localhost:7357/assets/test-support.js:6978:5)
at http://localhost:7357/assets/test-support.js:6219:6
Tried to restart test while already started (test's semaphore was 0 already)@ 61 ms
Source:
at resume (http://localhost:7357/assets/test-support.js:6171:5)
at done (http://localhost:7357/assets/test-support.js:6362:7)
at Class.asyncEnd (http://localhost:7357/assets/test-support.js:13822:9)
at asyncEnd (http://localhost:7357/assets/vendor.js:68040:15)
at http://localhost:7357/assets/vendor.js:67197:31
at invoke (http://localhost:7357/assets/vendor.js:65509:16)
at Queue.flush (http://localhost:7357/assets/vendor.js:65400:13)
at DeferredActionQueues.flush (http://localhost:7357/assets/vendor.js:65597:21)ANSWER
Answered 2019-Jul-21 at 15:58Ember testing has moved to an async/await pattern instead of using andThen and other global test helpers. That tutorial is for a fairly old version of Ember, you'll have a lot more success with a more recent guide. Even if you are not ready to update to a newer version of ember I would still recommend following the new test patterns as they are significantly easier to read and write.
If you want to test it with andThen you wouldn't need to import it as it was provided as a global, but you need to make sure your testing dependencies are correct. I would start with comparing your current package.json with the default for ember apps at that time you may need to downgrade some packages in order to get access to the old imports and global test helpers.
QUESTION
Having recently migrated Ember CLI from 2.15.0 to 3.7.0, the acceptance tests have regressed heavily. Having run the qunit codemod, the following issue seems to persist: UnrecognizedURLError: /tests.
I have produced a minimum reproduction of the issue via the following acceptance test:
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
module('Acceptance | poc', function(hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
test('visiting /poc', async function(assert) {
await visit('/');
assert.equal(currentURL(), '/');
});
});
This results on the three following issues:
Promise rejected before "visiting /poc": /tests?filter=poc
Source: UnrecognizedURLError: /tests?filter=poc
beforeEach failed on visiting /poc: You must call one of the ember-qunit setupTest(), setupRenderingTest() or setupApplicationTest() methods before calling setupMirage()
Source: Error: You must call one of the ember-qunit setupTest(), setupRenderingTest() or setupApplicationTest() methods before calling setupMirage()
Promise rejected after "visiting /poc": Cannot use 'in' operator to search for 'destroy' in undefined@ 80 ms
Source: TypeError: Cannot use 'in' operator to search for 'destroy' in undefined
Any advice would be greatly appreciated!
ANSWER
Answered 2019-Mar-28 at 23:10As @jelhan points to in the comment above, the issue here is missing test environment settings within the environment.js configuration.
To fix the UnrecognizedURLError, adding ENV.locationType = 'none' satisfies the requirements of testem.
I also replaced the other environment variables found in the linked block.
My test environment configuration now looks like this:
else if(environment === 'test') {
ENV.locationType = 'none';
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
ENV.APP.autoboot = false;
}
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install ember-qunit
The setupTest() function can be used to setup a unit test for any kind of "module/unit" of your application that can be looked up in a container.
this.owner to interact with Ember's Dependency Injection system
this.set(), this.setProperties(), this.get(), and this.getProperties()
this.pauseTest() method to allow easy pausing/resuming of tests
The setupRenderingTest() function is specifically designed for tests that render arbitrary templates, including components and helpers.
Initializes Ember's renderer to be used with the Rendering helpers, specifically render()
Adds this.element to your test context which returns the DOM element representing the wrapper around the elements that were rendered via render()
sets up the DOM Interaction Helpers from @ember/test-helpers (click(), fillIn(), ...)
The setupApplicationTest() function can be used to run tests that interact with the whole application, so in most cases acceptance tests.
Boot your application instance
Set up all the DOM Interaction Helpers (click(), fillIn(), ...) as well as the Routing Helpers (visit(), currentURL(), ...) from @ember/test-helpers
git clone <repository-url>
cd ember-qunit
npm install
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page
