I am new to ember and I like what I see so far. I have done the tutorial and found to to be pretty easy to get something up and running. My question has to do with using mirage vs real data. I used mirage to stub in some data but now I would like to link to to real data. I would think this should not be too hard since I have the models..etc set up I just need to call an api instead of mirage. I have not seen a clean example of how best to do this.
Thanks
You can turn mirage on/off for all requests per environment in config/environment.js e.g. off for development, on for testing,
// config/environment.js
if (environment === 'development') {
ENV['ember-cli-mirage'] = {
enabled: false
};
}
if (environment === 'test') {
ENV['ember-cli-mirage'] = {
enabled: true
};
}
Or if you leave mirage on for everything, allow specific endpoints to with passthrough:
http://www.ember-cli-mirage.com/docs/v0.3.x/configuration/#passthrough
Related
I'm having an exciting upgrade in a vue2 project using #vue/composition-api 0.6.7, trying to upgrade to 1.7.1.
Some tests are breaking and I'm noticing a pattern where the tests in question mount a component with the data parameter, as if they're reaching in and manipulating a ref
Example
// MyComponent.vue
<script>
export default defineComponent({
setup() {
const showModal = ref(false)
return {showModal}
}
})
</script>
Example test which was working before but now is broken.
it('should show the modal when the showModal ref is true', () => {
const wrapper = mount(MyComponent, {
data: {
showModal: true
}
});
expect(wrapper.find('#modal').exists()).toBe(true)
}
This makes sense to me that this broke in some ways because data is more of an options api thing and creating a ref is more of a composition-api thing-- probably more solidified as we went to 1.0 in the composition-api. That said, do you think that it should work?
When I rewrite the tests to NOT mount using the data prop and test it another way, the tests pass fine. I was expecting it to work as before and honestly not testing using the mount({data}), wrapper.setData(), or wrapper.vm seems like a better approach. I'm just looking for a confirmation or root cause why it worked before and not now.
Beyond this condensed code sample, I have tests using wrapper.setData({ serverResponse }) to simulate when a network call returns. This similarly breaks when I upgrade this composition-api package.
I followed the guide here - https://sailsjs.com/documentation/concepts/testing
So my lifecycle.test.js looks like this:
var sails = require('sails');
// Before running any tests...
before(function(done) {
// Increase the Mocha timeout so that Sails has enough time to lift, even if you have a bunch of assets.
this.timeout(5000);
sails.lift({
// Your sails app's configuration files will be loaded automatically,
// but you can also specify any other special overrides here for testing purposes.
// For example, we might want to skip the Grunt hook,
// and disable all logs except errors and warnings:
hooks: { grunt: false },
log: { level: 'warn' },
}, function(err) {
if (err) { return done(err); }
// here you can load fixtures, etc.
// (for example, you might want to create some records in the database)
return done();
});
});
// After all tests have finished...
after(function(done) {
// here you can clear fixtures, etc.
// (e.g. you might want to destroy the records you created above)
sails.lower(done);
});
However in my test I am not able to use Cloud. I thought this was available to me because I saw in test suites here that they use Cloud - https://github.com/mikermcneil/ration/tree/master/test/suites
Do i have to modify my lifecycle.test.js to use Cloud?
Does Ember have built-in way to detect browser? Something like this if using this library(bowser)
if (bowser.msie) {
...
} else if (bowser.gecko) {
...
} else if (bowser.webkit) {
...
}
Or, I can just npm install bowser, then import it and use it in Ember
I guess there won't be any builtin way in ember to detect browser AFAIK. Usually this kind of job will be delegated to ember addon, may be try ember-browser-checker if this is not fulfilled your requirement then you can consider any npm/bower libraries like you found bowser.
I implemented a little browsercheck as service be aware that this is not secure, but works for simple needs
Ember UserAgent is an Ember addon which exposes a userAgent service, making it easy to detect browser, device, OS and more.
It works in both browser & Fastboot environments and is as simple as:
const userAgent = this.get('userAgent');
userAgent.get('browser.isChrome'); // Boolean
userAgent.get('engine.isWebKit'); // Boolean
userAgent.get('os.info'); // => { name: 'Ubuntu', version: '11.10' }
userAgent.getDevice(); // => { model: 'iPhone 7', type: 'mobile', vendor: 'Apple'}
I was reading the documentation here, and it looks like I should be able to activate feature flags like this in my config/environment.js file:
var ENV = {
EmberENV: {
FEATURES: {
'new-computed-syntax': true,
'ember-htmlbars-component-generation': true
}
}
}
Yet this doesn't seem to be enough, even after restarting ember server. Any suggestions?
Nevermind, just found the answer. I had to be on canary to get access to the code. You can find out how to be canary here.
I have an adapter something like this:
var Adapter = DS.RESTAdapter.extend({
host: 'http://localhost:4200'
});
if (config.environment === 'production') {
Adapter.reopen({
host: 'http://foo.example.com'
});
}
This has been working for a while, but recently something breaks. My ember app interfaces with a number of different subdomains (eg foo.example.com and bar.example.com). My understanding is that reopen changes all instances, which is what I think happens. When I browse to '/bar' it uses the correct adapter in production, but browsing to '/foo' still uses the bar.example.com endpoint.
My question is two fold. Firstly, am I using the right approach here?
Secondly, I'd like to change the adapter based on a runtime setting. I need to work around IE8 lack of CORS support so am thinking that if I have an ie8 switch, the adapter should hit example.com/foo instead of foo.example.com. In my mind these two areas are conceptually related, but I'm happy to be wrong.
update
To simplify things, I essentially want to find the hostname of the request and pass that into the adapter. For example if I browse to www.example.com I want the adapter to go fetch a record from www.example.com/foo, or when browsing to www.example2.com I want the adapter to fetch the record from www.example2.com/foo. I hope that makes sense. Is this even possible?
I'm not 100% sure on this, but my guess is that the value is being cached. My recommendation is to make host a volatile computed property. This actually works out better for you, since that will allow you to better select the host based on runtime configuration. Try something like this:
var Adapter = DS.RESTAdapter.extend({
host: function() {
if (config.environment === 'production') {
return 'http://foo.example.com';
} else {
return 'http://localhost:4200';
}
}.property().volatile()
});
Because Ember-Data always uses Ember's get method to fetch properties, changing host from a normal property to a computed one should make no difference. And because of that, you're able to select the host at runtime, and make sure that it's computed every time. (Don't worry about the performance of not caching that value, I promise it won't make a noticeable difference.)
import ENV from 'ember-arp-roomviewer/config/environment';
export default DS.JSONAPIAdapter.extend({
namespace: 'arp/v1',
//host: 'http://localhost/arp/index.php/wp-json',
//host: 'http://www.acme.net/myroomplan/wp-json',
host: function() {
if (ENV.environment === 'production') {
return 'http://www.acme.net/myroomplan/wp-json';
} else {
return 'http://localhost/arp/index.php/wp-json';
}
}.property().volatile(),
headers: {
'Content-type': 'text/plain' // Stops OPTION headers being sent PITA
}