Quasar2 Vue3 Cypress slide toggle status mismatch with what is shown on Cypress browser

Question

My vue template:

<template>
  <q-item tag="label" v-ripple>
    <q-item-section>
      <q-item-label class="text-mono">
        {{ name }}
      </q-item-label>
      <q-item-label caption>{{ description }}</q-item-label>
      <q-item-label
        caption
        class="text-red"
        v-show="warning"
        :key="warning"
        v-for="warning in warnings"
      >
        {{ warning }}
      </q-item-label>
      <q-item-label caption class="text-red" v-show="warningMsg">
        {{ warningMsg }}
      </q-item-label>
    </q-item-section>
    <q-item-section avatar>
      <q-toggle
        color="indigo"
        v-model="model"
        :disable="isToggleDisabled"
        @triggerFunc="btnToggleTrigger"
      />
    </q-item-section>
  </q-item>
</template>

I have the following cypress E2E test code snippet:

  it('Verify Toggle Button from auto-generated page', () => {
    cy.get('[data-test="toggle-setting-0"]').should("not.be.checked");
    cy.get('[data-test="toggle-setting-0"]').click();
    cy.get('[data-test="toggle-setting-0"]').should("be.checked"); // XXX
  });

The status validation fails AFTER the click(). However, cypress browser UI shows that the slider button is clicked. The error message:

Timed out retrying after 4000ms: expected '<label.q-item.q-item-type.row.no-wrap.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable>' to be 'checked'

What do I miss?

Answer 1

The <input> is within the element that has the data-test attribute.

You can verify the state by one of the inner element's class. Does not seem ideal to me, but it works.

cy.get('[data-test="toggle-setting-0"]')
  .find('.q-toggle__inner')
  .should('have.class', 'q-toggle__inner--falsy')

cy.get('[data-test="toggle-setting-0"]')
  .find('input')
  .check({force: true});

cy.get('[data-test="toggle-setting-0"]')
  .find('.q-toggle__inner')
  .should('have.class', 'q-toggle__inner--truthy')

Ideally, you would check the value of the v-model variable.

Answer 2

I can see that the value of aria-checked is changing for the toggle. So you can so like this:

//For toggle off
cy.get('[data-test="toggle-setting-0"]').should(
  'have.attr',
  'aria-checked',
  'false'
)

//For toggle on
cy.get('[data-test="toggle-setting-0"]').should(
  'have.attr',
  'aria-checked',
  'true'
)