After running the test, a snapshot is created that looks like this
<app-expansion-panels-stub items="[object Object]" contentclassnames="" value=""></app-expansion-panels-stub>
But I wish it looked like this
<app-expansion-panels-stub items="[{ header: title }]" contentclassnames="" value=""></app-expansion-panels-stub>
How to properly serialize an object so that it is displayed correctly
Related
I'm implementing onErrorCaptured in a Vue component. It has 3 parameters (error: unknown, instance: ComponentPublicInstance, info: string). instance actually ends up being a Proxy. Since the error bubbles up to the component that I'm implementing the onErrorCaptured in, I am trying to get the name of the component that threw the error.
I'm pretty sure that using the router will work in most cases const throwingComponentName = router.currentRoute.value.name.
However, how do I get the name of the component from the instance?
If your component has its name option defined, you can access it from instance._.type.name:
onErrorCaptured((err, instance, info) => {
console.log('component name', instance._?.type?.name)
})
demo
Since instance._ is technically an internal/undocumented property, use it with caution, as it could be refactored/removed in a future release. This works as of vue#3.2.37.
I have been trying to use publicRuntimeConfig / privateRuntimeConfig
On nuxt 2.4.1, I have defined my runtime config as follows on nuxt.config.js
publicRuntimeConfig: {
DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL,
},
privateRuntimeConfig: {
AUTH_APP_CLIENT_SECRET: process.env.VUE_APP_AUTH_APP_CLIENT_SECRET,
},
and calling it as follows on my login.vue
asyncData( ctx ) {
console.log(ctx.$config.DATA_API_HOST_URL)
//some activity
}
The keys are showing up on $config inside asyncData. I debugged on chrome dev tools. But value is not read from process.env.VUE_APP_DATA_API_HOST_URL. The value is showing up as undefined. However, process.env.VUE_APP_DATA_API_HOST_URL is showing the value OK. The whole point is to move away from process.env.
this.$config.DATA_API_HOST_URL also does not access the values.
'${DATA_API_HOST_URL}' is shown in examples but I believe it is only for explicit param declarations at asyncData like asyncData( { $config : {DATA_API_HOST_URL}).
When I pass values as it is using DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL || 'https://test.api.com', it seems to copy the value fine using ctx.$config.DATA_API_HOST_URL!
Looking to me like copying process.env to *RuntimeConfig has a problem!
What is the recommended way of importing and using runtime configurations?
As per documentation in the Nuxt blog post you marked, the feature your are trying to use is released in 2.13 (you´re using 2.4 if i not misunderstood). That could be the reason behind the behaviour you're seeing.
I'd recommend update your project dependencies or trying another approach.
I think you should use Docker to set dynamic runtime config like link below:
https://dev.to/frontendfoxes/dockerise-your-nuxt-ssr-app-like-a-boss-a-true-vue-vixens-story-4mm6
Starting to use the vue cli 3 and ran into a use-case I can't seem to find an answer for.
How can I set an environment variable via a .env file (ie, .env.development, .env.production, etc) that exposes a JSON object? Additionally, is there a way to load an external files contents into an environment variable (i.e., require)?
Appreciate the assistance!
I came up with a solution to solve my own issue...
Although the previous answers are viable I didn't want to have to JSON.parse every time I wanted to use the JSON in the environment variable.
The approach I took was to store in each environment-specific file (i.e., .env-development, .env-production, .env-test) a file path to a file containing the JSON. For example...
VUE_APP_JSON_FILE=./.env.development.json-data
This file would contain the raw JSON...
Then in my vue.config.js I used the webpack DefinePlugin to load up the file and make it available via a global variable. For example...
new webpack.DefinePlugin({
VUE_APP_JSON: JSON.stringify(process.env.VUE_APP_JSON_FILE)
})
Defining the new variable will make the json available as an object where throughout my app I can simply reference VUE_APP_JSON.property. This saves me from having to JSON.parse the variable all throughout my app.
You can
stringObj = JSON.stringfy(YourJson),
Then save this string inside the VUE_APP_SOME_KEY_NAME.
but when you'll use it you'll have to JSON.parse () it first.
So, you cannot directly store a json object in a key value .dotEnv file.
Another option is to load these json files Base on process.env.NODE_ENV.
like: require (`config.${process.env.NODE_ENV}.js)
You should distinguish which profile using dot . (as .env.production or .env.development) and the format must be KEY=value, you can't put a json object here, only strings, but you can use JSON.parse in your code to unserialize any string in the file.
Vue cli will only allow access to environment variables that starts with VUE_APP_ and to access, process.env.VUE_APP_SECRET
You can find it and more in the docs
I have defined one global variable in a Pre-request Script.
I want to compare this global variable with variable present in the response.
As the warning message says, you're running a very old version of Postman and it's probably the chrome extension.
This is now several major versions behind and the pm.* functionality is not included in that old version of the chrome extension.
Download the native application and start using the newest version of Postman. By not doing this, you're missing out on so many new features.
As #Danny mentioned, it is recommended to update to the latest version.
Now to your question, if you want to compare the global variable with workkard_number present in response, you need to first parse the response and get the workkard_number in it, which you can then compare with your global variable. You could try something like this in your test script:
var jsonData = JSON.parse(responseBody);
var responseWorkkardNumber = jsonData.wokkard_number;
You can retreive the workkard_number in the response like this(assuming that your response is a json with "workkard_number" as a key in it. Then you can compare it as follows:
tests["workkard_numbers are equal"] = responseWorkkardNumber === globals.workkard_number;
or
tests["workkard_numbers are equal"] = responseWorkkardNumber === pm.globals.get("workkard_number");
Also note - "Warning - Environment and global variables will always be stored as strings. If you're storing objects/arrays, be sure to JSON.stringify() them before storing, and JSON.parse() them while retrieving." - https://www.getpostman.com/docs/v6/postman/environments_and_globals/manage_environments
I am checking an instance of a qooxdoo class using console.log('%o', inst).
Here the properties are shown with leading "$$user..." marks.
But when adding a new property to the class, it is not shown in the console.log-output.
The code is running using the new property; so the syntax and class structure is ok. I checked in release and debug mode.
What do I have to do to see the new property also in the console.log output ?
Or is there something cached so it will not be shown until a certain refresh ?
Qooxdoo uses $$user_ to store the current, user provided, property value. The $$user_ values are only set if the property has been actively set after the object properties are constructed during class initialization.
Having some kind of init value is not enough, so you've to put something in there actively to make them visible in the console.log call above.
The init values are stored in the prototype as $$init_ followed by the variable name. So
qx.Class.define("foobar", {
extend: qx.core.Object,
properties: {
test1 : {},
test2 : {init: 5}
}
});
will result in no single $$user_test1 or $$user_test2 directly after you initialized the class. If you call setTest2(99), you'll see that $$user_test2 shows up in the console - and it disappears if you call resetTest2().
To answer the question: you can only enforce having $$user_ values to be set, by putting someting in actively. Or better define a watch in your chrome console that calls getTest2() on the watched object.