quasarframework / quasarframework/quasar-testing

Inconsistent behaviour when using components from an AE's provided UI Kit that extend Quasar components when run in Vitest

Open
#388 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
184
Forks
67
Avg merge
20h 53m
Merged PRs (30d)
5

Description

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:

Image

or this with q-btn-dropdown case:

Image
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.

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)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Build the UI portion of quasar-test-ui with npm run build, then run npm run test:unit in quasar-test-app. Compare the q-btn and q-btn-dropdown cases with the corresponding my-button and my-button-dropdown cases under tests/vitest/*. Done means wrapped components register clicks and avoid the reported Platform plugin error in Vitest.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.