`q-select` multiple selection behaves strangely in cypress component test

[khteh]

Software version

OS: Ununtu 23.10 Node: v21.5.0 NPM: 10.3.0 Any other software related to your bug:

What did you get as the error?

   it('Verify Multiple-Select from auto-generated page', () => {
    cy.get('[data-test="multidropdown-setting-4"]').find('button').should('exist');
    cy.get('[data-test="multidropdown-setting-4"]').find('button').should('be.visible');
    cy.get('[data-test="multidropdown-setting-4"]').find('button').should('be.disabled');
    cy.get('[data-test="multidropdown-setting-4"]').should('have.value', '');
    cy.get('[data-test="multidropdown-setting-4"]').find('label').should('contain', "Auto Generated Multi-Selection box").should('be.visible').click();
    cy.get('[data-test="multidropdown-setting-4"]').should('have.value', '');
    cy.get('[data-test="multidropdown-setting-4"]').find('span').should('have.text', 'done'); // "done" comes from icon
    //cy.get('[data-test="multidropdown-setting-4"]').find('label').select(['Option 1']);
    cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        cy.get('.q-item[role=option]').contains("Option 1").click().click() // XXX: Why needs twice?
      },
    })
    cy.get('body').click();
    cy.get('[data-test="multidropdown-setting-4"]').find('span').should('have.text', 'Option 1done'); // "done" comes from icon
    cy.contains('[data-test="multidropdown-setting-4"]', "Auto Generated Multi-Selection box")
      .should('be.visible')
      .and('contain', "Option 1")            // verify display element     

    cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        cy.get('.q-item[role=option]').contains("Option 3").click() // XXX: Get "Option 3done". Expected "Option 1" to remain selected
      },
    })
    cy.get('body').click();
    cy.get('[data-test="multidropdown-setting-4"]').find('span').should('have.text', 'Option 1, Option 3done'); // "done" comes from icon
    cy.contains('[data-test="multidropdown-setting-4"]', "Auto Generated Multi-Selection box")
      .should('be.visible')
      .and('contain', "Option 1, Option 3")            // verify display element     

(1) Why double click().click() in the first withinSelectMenu? (2) Result of click() in withinSelectMenu is not persistent. At least this is what is observed after the first withinSelectMenu (3) The order of selected result is random / does not match the order of multiple click()s in withinSelectMenu

    cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        cy.get('.q-item[role=option]').contains("Option 1").click() 
        cy.get('.q-item[role=option]').contains("Option 3").click() 
      },
    })

should be "Option 1, Option 3". However, what I get is "Option 4, Option 1"

Reproduction https://github.com/khteh/quasar.git: https://github.com/khteh/quasar/blob/master/src/components/AutoGenerate/AutoGenerate.vue https://github.com/khteh/quasar/blob/master/src/uiElements/MultiDropDownSetting.vue https://github.com/khteh/quasar/blob/master/test/cypress/components/AutoGenerate.cy.ts

What were you expecting?

Expect the selection done in previous withinSelectMenu to remain selected.

What steps did you take, to get the error?

[IlCallo]

Can you create a repro, as I already requested you on other issues?

I know nothing about your environment and components, without a repro I have no means to help you

[khteh]

Updated initial post

[IlCallo]

We have helpers you can use to select options within a QSelect

See https://github.com/quasarframework/quasar-testing/tree/dev/packages/e2e-cypress#automatic-override-of-cypress-commands See https://github.com/quasarframework/quasar-testing/blob/dev/packages/e2e-cypress/src/templates/typescript/src/components/___tests__/QuasarSelect.cy.ts See https://github.com/quasarframework/quasar/pull/16636/files#diff-fc1b210818906cc73332385c5aa82910eb0a31105c2179c241a1bd3719394d30

Please try using the helpers we provide, which just mirror the helpers provided by Cypress really, and let us know if you still hit the issues you're hitting using your custom code

[IlCallo]

See https://github.com/quasarframework/quasar-testing/issues/361#issuecomment-1921898534

[khteh]

No luck:

(1) cy.dataCy fails to locate the named QSelect element in the component.

    cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        //cy.get('.q-item[role=option]').contains("Option 1").click().click()
        cy.dataCy('multidropdown-setting-4').select('Option 1');
      },
    })

(2) Is there any sample for cy.withinSelectMenu({? I don't find it in the list of URLs that you provided earlier!

https://github.com/khteh/Quasar

[IlCallo]

It fails because you're already within it That's what cy.withinSelectMenu does

You can use it like this

cy.withinSelectMenu(() => {
  cy.contains('Option 1').click()
})

or like this, which is how Cypress native .select works

cy.dataCy('multidropdown-setting-4').select('Option 1');

[khteh]

The following code snippet:

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

results in the following validation error:

And the following code

cy.dataCy('multidropdown-setting-4').select('Option 1');

the following error: