Comments (13)
The problem you're encountering is that Tether / ember-tether appends items to the body element. But Ember acceptance testing expects the app to be contained wholly within the test container, so click helpers and the like don't work.
We've worked around this in out apps by creating helpers that are not scoped. e.g.
function unscopedClick(app, selector, context) {
var $el = $(selector, context);
Ember.run($el, 'mousedown');
focus($el);
Ember.run($el, 'mouseup');
Ember.run($el, 'click');
return app.testHelpers.wait();
}
function unscopedFillIn(app, selector, contextOrText, text) {
var $el, context;
if (typeof text === 'undefined') {
text = contextOrText;
} else {
context = contextOrText;
}
$el = $(selector, context);
focus($el);
Ember.run(function() {
$el.val(text).change();
});
return app.testHelpers.wait();
}
Ember.Test.registerAsyncHelper('unscopedClick', unscopedClick);
Ember.Test.registerAsyncHelper('unscopedFillIn', unscopedFillIn);
I'm not sure if this qualifies as a "recommended" approach. I wish there was a better solution, but I don't have one yet.
from ember-modal-dialog.
If you are using tether-dialog and want to disable it during tests while this issue is unresolved, you can set the renderInPlace
property to true during tests.
Please fix this!
from ember-modal-dialog.
If you're doing acceptance testing the emberjs/rfcs#268 way, you can bypass renderInPlace
which always felt a little dirty with this in your environment:
if (environment === 'test') {
ENV.APP.rootElement = '#ember-testing';
ENV['ember-tether'] = {
bodyElementId: 'ember-testing'
};
}
and in your acceptance tests, ensure you're importing the appropriate test selectors
import { click } from '@ember/test-helpers'
Perhaps we can now close this issue?
from ember-modal-dialog.
@lukemelia thanks for the detailed explanation.
Based on this example I implemented helpers that are successfully filling out forms and clicking buttons inside a Tether based modal. However the tests fail to complete because it seems like the actions aren't bubbling correctly. Is this due to the event delegation caveat mentioned here?
from ember-modal-dialog.
I can see now this is a deeply rooted issue in Ember event dispatching yapplabs/ember-tether#3.
An alternative approach would be to disable ember-tether
when running tests but keep it enabled in other environments. Is there a good way of doing this? Digging through the source it seems to be auto detected so I can't find an obvious way to switch it off in test mode.
from ember-modal-dialog.
This is definitely not a recommended approach, as it would special case your test environment state and could therefore mask real bugs. But the ember-modal-dialog test suite does have a set of tests that cover non-ember-tether environments by stubbing hasEmberTether
to false:
As you can see, it uses several private apis, doesn't work for 1.10 and prior, etc. So...
from ember-modal-dialog.
We are currently dealing with the same issue. We wanted to use ember-tether
for something else than modals and now our existing tests are broken. A good solution for us would be an option to tell ember-modal-dialog
to not use tether even though it is available.
from ember-modal-dialog.
@gzurbach It's not directly documented, but you can specify useEmberTether=false
to fall back to the positioned-container
-based positioning.
from ember-modal-dialog.
Awesome! Thanks for the quick answer.
from ember-modal-dialog.
+1. Would love to see a good solution for this... the unscopedClick test helper seems like it would be the least hacky way to implement acceptance tests, but I wasn't able to get it to work properly.
from ember-modal-dialog.
If I understand correctly, there are two problems in testing environments where the body tag is not the Ember rootElement. Getting the test helpers to interact with an ember-tether dialog box, and getting the actions to propagate correctly from the ember-tether dialog box. The first problem has a couple work arounds, but I don't see anything on here that worked for me for the second problem with the actions. Here's my work-around in case anyone finds it helpful (this is using Ember 1.13):
{{#component (if Ember.testing "modal-dialog" "tether-dialog")
attachment="top right"
clickOutsideToClose=false
hasOverlay=false
offset= "-10px -10px"
target=".submit-search__submit-btn"
targetAttachment="bottom right"}}
{{!-- dialog template here --}}
{{/component}}
So during the tests it just uses "modal-dialog" which doesn't look right but works. The tether-dialog specific properties are just ignored. And then you can use the regular test helpers. I know its not a good idea to make the code different between the production environment and the testing environment, but in this case I figured you can go for either less-than-ideal acceptance tests or no acceptance tests at all of the "actions up" part of a component dependent on ember-tether.
from ember-modal-dialog.
I believe setting renderInPlace
to true
in test environments is the best workaround for this issue, currently.
from ember-modal-dialog.
@axsuul That sounds much better! Could you PR the README with a new section for Testing, and add your snippet?
from ember-modal-dialog.
Related Issues (20)
- Config Generator not adding ember-modal-dialog attrs in Ember 3.12 HOT 1
- focus content HOT 1
- Octane!
- error get onClose HOT 2
- `.emd-wrapper-target-attachment-center .ember-modal-dialog` is missing `position: absolute`
- ember-animated integration examples? HOT 2
- Does this work with Embroider? HOT 15
- Breaks in Ember 3.22 HOT 2
- Deprecation warnings with Ember 3.26+ HOT 5
- Issue with ember 3.27 HOT 6
- Update ember-wormhole to v0.6.0
- Ember v3.27: Exception on Ember.computed.reads (liquid-wormhole) HOT 4
- Use of old addon https://github.com/ef4/ember-ignore-children-helper
- Release of 4.0.0? HOT 3
- does not work with engines (release 4.0.0-alpha.1) HOT 6
- Convert to v2 addon
- Ember 3.26+: TypeError: this.overlayClassNames?.join is not a function
- tarball data corrupted? HOT 1
- Ember 3.28: TypeError: this.containerClassNames.join is not a function HOT 1
- Update to ember-tether 3.0.0 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-modal-dialog.