How to test quasar component with cypressjs?

Question

I use quasar to build my webapp and I have question regarding testing components with CypressJS.

I am using https://quasar.dev/vue-components/select#Example--Generating-multiple-values on my webapp and that looks as the following:

and the component code:

<q-select
  filled
  label="Enter your interests"
  new-value-mode="add-unique"
  v-model="user_interests"
  use-chips
  multiple
  option-value="id"
  option-label="description"
  input-debounce="0"
  :options="interests_filtered"
  @remove="interestRemoved"
  @filter="filterInterests"
  style="width: 400px"
/>

I would like to write a test for q-select for instance, if the component q-select contains any values.

My question is, how to write such a test with CypressJS?

Answer 1

Give your q-select component an id attribute first:

<q-select id="select"></q-select>

Get the component with the id, click it and check for span elements containing your desired option and click it as well.

cy.get("select").click()
cy.get("span").contains("LABEL_OF_OPTION").click()

Not quite perfect, but is an approach worth.

Answer 2

It depends on the targets, here I post my suggestion:

Search input use:

<q-select search-id-attr />

Dialog list items use:

<q-select>
<template v-slot:option="scope">
<q-item search-select-attr v-bind="scope.itemsProps">
<q-item-section>
<q-item-label>{{scope.opt.yourProperty}}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>