I've tried this way: Can I select an element by ref using vue test utils which works and is also what the documentation suggests: https://vue-test-utils.vuejs.org/api/selectors.html. However it gives a warning:
console.error node_modules/#vue/test-utils/dist/vue-test-utils.js:1704
[vue-test-utils]: finding components with `find` or `get` is deprecated and will be removed in the next major version. Use `findComponent` and `getComponent` instead.
Is there a proper way of doing this? I'm not trying to find a component, but an element, so findComponent doesn't work. I've double checked that I'm testing the correct component and that the element with the correct ref within it exists.
Related
here is my code, options array updated in created hook based on api response and response of api is array of object and v-model value is also updated in created hook. this selector is of input type and also filter the data based on input type from options array.
hope so this chunk of code is enough to explain.
<q-select
ref="registeredCountry"
for="registeredCountry"
color="olab-brand-blue"
v-model="registeredAddress.country"
use-input
fill-input
hide-selected
:options="countryOptions"
#filter="filterCountryList"
emit-value
option-label="countryName"
option-value="countryName"
#update:model-value="resetStateAndCityFields('registeredAddress')"
map-options
>
</q-select>
I got exactly the same Vue warning with one of my q-selects, after migrating it (unchanged) from Vue 2/Quasar 1 to Vue 3/Quasar 2. The same q-select code worked without warnings on the older levels. The warning is very unspecific from a Quasar point of view.
However, I found a hint on https://github.com/quasarframework/quasar/issues/8898 to eliminate this warning, which helped to resolve the issue in my case.
The reason for the warning was in my case due to the use of q-chips with q-items for the options in the q-select. Those q-items for the q-select options used "v-on='scope.itemEvents'", together with "v-bind='scope.itemProps'", which was the recommended combination in Quasar 1/Vue 2.
In Quasar 2/Vue 3 the "v-on='scope.itemEvents' is no longer necessary (if used, it causes this Vue warning). Just search for all "v-on='scope.itemEvents'" in your template code, then drop (i.e. delete) those "v-on=...", but keep the "v-bind=...".
This eliminates the above Vue warnings (which otherwise come up for every selectable option in your q-select).
My guess is that there is no App component parent, which is the root component.
I think undefined should be normal. Am I thinking wrong?
So if you look at the code, you'll see getting $ undefined by $ parent. $ Parent.
If you look at the Vue.js source code you'll see this line in the initProps function ..
const isRoot = !vm.$parent
Which means that the absence of a $parent does signify that this is the root Vue instance. So it's normal that you're getting undefined in this case.
in my page object I have simple method
def clickSomething(byName) {
$("a.name", text: contains(byName)).click()
}
and during execution it does not find required element and goes further.
it happens because, according to documentation, $() returns EmptyNavigator if element not found.
I want for test to fail with some kind of "ElementNotFoundException" or "NullPointerException" on trying to make click on null element.
I also do not want to add additional checks for returned element (because I would need to add that for every element identification).
Is there an elegant workaround for that ?
e.g. for elements declared within "content" there is performed such a check. But what is the best practice for elements found outside content block ?
The issue that you've encountered which is click() not throwing an error when called on en empty navigator has been fixed recently and will be released in the next version of Geb.
If you need to get an error when a selector results in an empty navigator then you can either:
wrap your selector in a content definition with the required template option set to true which is the default
call verifyNotEmpty() on your navigator
There are 2 projects generated by vue-cli.
one of it I could add component like this code below:
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));
But another one I can't do this , I must code like this:
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default);
if not, I will get this error message:
Failed to mount component: template or render function not defined
Is anyone could tell me Why like this ？
Thank you for help .
When using ES6 imports (export default HeaderBar), the exported module is of the format {"default" : HeaderBar}. The import statement handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline.
If you want to avoid that, use module.exports instead of export default.
I'm currently implementing vue-tables-2 (first time) and I've set up a template to show an icon that will fire an event when clicked. However, I'm getting an error that I'm not sure where it's deriving from. The error is the following.
Uncaught TypeError: fns.apply is not a function
at HTMLAnchorElement.invoker (vue.esm.js:1821)
templates: {
edit: function (h, row) {
return </i>
}
The function code itself is as follows.
editSchedulesBtn: function (rowId) {
console.log(rowId)
}
I have found this stackoverflow question have tried implementing it, but no success --> How to bind vue click event with vue tables 2 (JSX)?
Thanks for all assistance in advance.
I see a few problems:
A syntax error:
Instead of
edit: function (h, row) {
return </i>
}
Should be:
edit: function (h, row) {
return </i>
}
Secondly, the this context inside the function refers to the root vue instance, as stated in the docs:
In addition a this context will be available, which refers to the root
vue instance.
So the $parent is obsolete. You might even have to use $children or $refs, depending on your app structure (Explore the tree using the chrome dev tools and you will find the exact "address").
Thirdly, when binding an event with jsx you should not call the method directly, but use the bind method instead (As explained in the answer you have attached):
on-click={this.editSchedulesBtn.bind(this, row.id)} // See the aforementioned answer for ES6 syntax
As an aside, since Vue introduced scoped slots in v2.1, it is best to use those rather than jsx, which requires compilation, and is generally more cumbersome to deal with.