quasar-testing

quasar-testing copied to clipboard

Description

When using a Quasar app extension that provides UI components that extend Quasar components, the components exhibit mixed behaviour when run inside a Vitest testing environment (which they do not exhibit when simply used in a host app).

Example

Writing a simple test that uses q-btn to increment a counter with clicks works fine and tests pass. However, switching these components with ones from an AE's UI Kit (i.e. my-button) that do nothing but return a q-btn from their render function causes the click function to no longer get called properly. Similarly, a q-btn-dropdown works fine and tests pass but a custom my-button-dropdown that simply returns a q-btn-dropdown causes a strange error that seems to originate from the Platform plugin.

From app extension's UI Kit:

import { h } from 'vue'
import { QBtn } from 'quasar'

export default {
  name: 'MyButton',

  setup (props, { attrs}) {
    return () => h(QBtn, {
      ...props,
      ...attrs,
      class: 'my-button'
    })
  }
}

Simple test case in host app using Vitest

<template>
  <div>
    <p>{{ title }}</p>

    <p>Clicks on button: {{ clickCount }}</p>

    <my-button @click="increment" />
    <my-button-dropdown @click="increment" />

    <q-btn @click="increment" />
    <q-btn-dropdown @click="increment" />

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = withDefaults(
  defineProps<{
    title: string;
  }>(),
  {
    title: 'Hello!',
  },
);

const clickCount = ref(0);
function increment() {
  clickCount.value += 1;
  return clickCount.value;
}
</script>

The test for this case:

describe('example Button', () => {
  it('should register a click event and perform it', async () => {
    const wrapper = mount(ExampleButton, {
      props: {
        title: 'Hello'
      },
    });
    expect(wrapper.vm.clickCount).toBe(0);
    await wrapper.find('.my-button').trigger('click');
    expect(wrapper.vm.clickCount).toBe(1);
  });
});

results in:

or this with q-btn-dropdown case:

Reproduction

This issue spans two repos: one for the app extension/UI kit, and another for the Vitest test case that uses the component from the UI kit.

• https://github.com/XDSystems/quasar-test-ui
• https://github.com/XDSystems/quasar-test-app

To reproduce:

1. Install dependencies and build the ui portion of the quasar-test-ui repo using npm run build
2. Ensure the quasar-test-ui repo is properly linked as a dependency in the quasar-test-app and install dependencies
3. Run npm run test:unit in the quasar-test-app and play around with the examples commented in/out under the tests/vitest/* directory (switch q-btn for my-button, q-btn-dropdown for my-button-dropdown, etc)