CODEWITHSUNDEEP
drop-down-menucypressvuejs3html-selectquasar-framework
khteh
khteh

Reputation: 3900

Quasar2 Vue3 Cypress multi-select test fails with strange error

My template:

<template>
  <q-item tag="label" v-ripple>
    <q-select
      borderless
      stack-label
      emit-value
      map-options
      multiple
      class="full-width"
      v-model="model"
      :options="options"
      :label="name"
    >
      <template v-slot:after>
        <q-btn
          data-test="btnMultipleDropDownSetting"
          round
          dense
          flat
          color="primary"
          icon="done"
          @click="multiSelectionCompletes"
          :disable="submitButtonDisable"
        />
      </template>
    </q-select>
  </q-item>
</template>

Test code:

   it('Verify Multiple-Select from auto-generated page', () => {
    cy.get('[data-test="multidropdown-setting-4"]').find('label').should('contain', "Auto Generated Multi-Selection box");
    cy.get('[data-test="multidropdown-setting-4"]').find('label').click();
    cy.get('[data-test="multidropdown-setting-4"]').find('label').select(["Option 1"]);
    cy.get('body').click();
    cy.get('[data-test="multidropdown-setting-4"]').find('span').should('have.text', 'Option 1');
   }); // XXX

Cypress fails with very strange error without even running the test yet: enter image description here

Upvotes: 0

Views: 237

Answers (2)

Pawan Kumar
Pawan Kumar

Reputation: 604

I was facing the same issue. Got it to work by going through the quasar testing Github repo. Sample Code if anyone is facing similar issue.

cy.dataCy('select').click()
cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        cy.contains('Option One').click()
      },
    })

Upvotes: 0

Fody
Fody

Reputation: 31974

The Quasar Cypress helpers overrides the .select(), see cypress.overrides.ts

if (subject.hasClass('q-select')) {
  if (Array.isArray(valueOrTextOrIndex)) {
    if (!subject.hasClass('q-select--multiple')) {
      throw new Error(
        'Cypress: select command with array param can only be used with a multiple select',
      );
    }
  } else {
    valueOrTextOrIndex = [valueOrTextOrIndex];
  }

This shows that the

<q-select
  ...
  multiple
>

should throw an error (not the one you get, but the one shown above) when you pass a single value into the .select().

Try passing an array

cy.get('[data-test="multidropdown-setting-4"]')
  .find('label')
  .select(["Option 1"])

BTW The error message you get above isn't coming from the .select() override, but from the portal helper. I haven't traced back to that point, but try with the above mod first as it seems most likely.

Using cy.withinSelectMenu()

This might also work:

cy.get('[data-test="multidropdown-setting-4"]')
  .find('label')
  .click();                      // open the menu

cy.withinSelectMenu(             // should only be one menu open
  {persistent: true},            // this means you have a multiple select
  () => { 
    cy.get('.q-item[role=option]').contains("Option 1").click();
  })

Upvotes: 1

Related Questions