I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify.
For e2e testing I use the Cypress.
Below is my scenarios of test in Cypress:
I have a problem while creating test for page where I use v-autocomplete component.
The problem is that I can't use Vuetify native classes to get the element I want to test.
below is an example with data-cy selector
<v-autocomplete
v-model="model"
:items="items"
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
data-cy="autocomplete"
></v-autocomplete>
I type some text into search input.
Then in v-autocomplete have been found search results.
And example of one of there is below:
...
<div>
<a class="v-list__tile v-list__tile--link theme--light">
<div class="v-list__tile__content">
<div class="v-list__tile__title">Result item
<span class="v-list__tile__mask">result item</span>
</div>
</div>
</a>
</div>
...
Then I want select one of search items by clicking to one of found results.
And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers).
How I can add data-cy selector into result search html item?
Maybe who know any another way to resolve this problem?
I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).
In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector
For example,
cy.contains('div', 'itemTextToSelect').parent('a').click()
If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).
BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.
Related
I've been struggling all day to find a way to conditionally render a directive on an element.
I ended up on this page: https://vuejs.org/guide/extras/render-function.html but then I wasn't able to append my compiled template (using vue-template-compiler, since I'm using some version of vue which doesn't include the compiler).
At the end of the day this is what I figured:
<div>Some foo</div>
<template v-if="withDirective">
<input :value="value"
:disabled="disabled"
:type="type"
v-some-directive="someValue" />
</template>
<template v-else>
<input :value="value"
:disabled="disabled"
:type="type" />
</template>
<div>Some bar</div>
Is there a better way?
I have a lot more attributes on the input, so there's really a lot of duplicate code which I would love to avoid.
This html is inside a custom component, so all the values like disabled, required, etc, are props passed from outside.
The best way I found so far is compiling a string template conditionally using compileToFunctions.
So instead of having the template tags and the v-if in the template, I simply add the conditional directive(s) before compiling the component.
ATTENTION
Keep in mind that the compilation is runtime, I don't have enough experience with Vue (yet) to tell if this way is faster than using v-if. What is sure is that we saved a lot of duplicate lines in the template, which is handy when editing common parts.
I am trying to use vue-masonry-wall in my NuxtJS (v2.15.7) app to give it a masonry layout. According to the docs, the vue-masonry-wall package is "SSR friendly". It states to simply add :ssr="{columns: 2}" to masonry so that during SSR, it will be loaded in 2 columns.
I tried this in my code (codesandbox here). But, during SSR, nothing is loaded.
Anyone got any idea on what is happening and why I can't see any of the items? It works fine in client-mode.
Code example:
<vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" :ssr="{columns: 2}" #append="append">
<template v-slot:default="{item}">
<div class="item">
<h5>{{item.title}}</h5>
<p>{{item.content}}</p>
</div>
</template>
</vue-masonry-wall>
One option is to run it just on the client side, so:
1- if loaded as plugin, globally: name the plugin file ending with ".client", for instance: 'vue-masonry-wall.client.js'
2- if used as module, you can wrap it with the tag.
I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...
<v-layout v-for="(section, index) in fields.link_sections" :key="index">
<h2>{{section.header}}</h2>
<v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>
If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?
Your syntax is wrong, try this snippet:
<v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>
Denotes the target route of the link.
I'm building a Single Page Application using, Vue, Vue-router and Vuex. I've tried to implement Algolia Instantsearch vuejs, but I'm having some issues. Since my app is using a lot of nested components, I'm having a hard time figuring out how to structure this one.
This is the basic structure:
- App
- Header (this is where the search input is placed)
- Content
- Search (this is where the refinements and results are shown)
- Footer
I've read the documentation, but I might have missed something. Let's say the user is on the homepage, when starting typing into the searchinput in the Header component. I then use vue-router to go to /search, but this doesn't seem to work?
I don't know how to do this? As from what I can understand, the documentation only show you how to sync with vue-router and now how to handle my scenario.
I believe this is a fairly common use case for instantsearch, but I couldn't find anything searching through Google. Maybe because, I don't know how to describe the issue.
I hope you can help.
Thanks!
If you use the latest version of vue-instantsearch, you may use ais-configureas describe by https://www.algolia.com/doc/api-reference/widgets/configure/vue/.
<ais-instant-search :index-name="indexName" :search-client="searchClient">
<ais-configure :query="query" />
<ais-hits>
<div slot="item" slot-scope="{ item }">
<h2>{{ item }}</h2>
</div>
</ais-hits>
</ais-instant-search>
I think this is possibly a bug I've stumbled across, not sure. I'm getting this Vue.js warning for a component:
vue.js:2611 [Vue warn]: Cannot use <template> as component root element because it may contain multiple nodes:
The problem seems to be this:
<template id="tpl-field">
<template v-if="fieldType==='checkbox-inline'">
<label class="checkbox-inline">[SNIP]</label>
</template>
<template v-else>
[SNIP]
</template>
</template>
So I have two template nodes, which seems to be the multiple nodes it's choking on (certainly each of the template nodes contains just a single node). Yet this is an if-else in Vue - if one of the nodes is present, the other logically cannot be.
Demo of the problem here: https://jsfiddle.net/jonmor51/Ldz3k0jp/1/. If I wrap everything in a div, it works. But without, it fails. (Unfortunately, in the context where I want to use this, namely for inline checkboxes within a Bootstrap grid, wrapping in a div breaks things).
Not sure if this will solve your problem with bootstrap... but you could wrap you inner templates with a <transition> tag and set a key to each one.
Please check this working fiddle
https://jsfiddle.net/AldoRomo88/7c7znu3p/
helpful thing - just use div display: contents as a root of the component and browser will ignore that element and consider child elements (which can be many) as children of upper dom element
<div style="display: contents">
<template v-if="...">
<template v-for="..."> ...
</template>
<template v-if="...">
</template>
</div
works even inside tables!
The inner templates direct children, are they single elements? If so, you can just remove the inner templates and move v-if to the label.
Or, just use span rather than div as your quick fix, which won't break inline elements' style.