capricorn86 / happy-dom

A JavaScript implementation of a web browser without its graphical user interface
MIT License
3.09k stars 185 forks source link

v13.6.2->13.7.0 missing some of my events from vue app #1409

Closed VividLemon closed 1 month ago

VividLemon commented 2 months ago

Describe the bug A clear and concise description of what the bug is.

During a change from v13 to v14, I noticed that my tests had randomly broke. I assumed it was something internally, but when regressing back my package.json, everything worked fine. I pushed each version one by one until I found it was v14 of happy dom.

To Reproduce

I have the two following components:

child:

<script setup lang="ts">
const localValue = defineModel<string>({default: ''})
</script>

<template>
  <input
      v-model="localValue"
      id="foo"
      type="checkbox"
    />
    <label>
      <slot />
    </label>
</template>

parent:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld @update:model-value="console.log('modelvalue change', $event)" />
</template>

When done rawly in the browser (firefox) document.getElementById('foo').click() I get modelvalue change false This is correct.

However, when I go to my test:

describe('HelloWorld', () => {
  it('renders properly', async () => {
    const wrapper = mount(HelloWorld, { props: { modelValue: '' } })
    await wrapper.get('input').trigger('click')
    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
  })
})

This should not be failing.

What's perplexing is that in my example reproduction, I don't get anything in the test. All versions seem to fail... Unlike the main repository just failing between those two versions: vue-project.zip

As said, in my real repository, I'm only seeing the issue when going between 13.6.2->13.7.0 at https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/6ea759874fd41d3da08ae3cafee052e19b3e51e1/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts#L600

It may be more useful to pull that repository, and view the issue there. For now, I'm going to keep the happy-dom version on 13.6.2. The issue exists in v14 latest

Expected behavior A clear and concise description of what you expected to happen.

The emitted() return should have update:modelValue as a key in the object -- it should not be undefined, and the test should pass.

Screenshots If applicable, add screenshots to help explain your problem.

image v13.6.2

image v13.7.0

Device:

Additional context Add any other context about the problem here.

dbritto-dev commented 2 months ago

@capricorn86 I'm facing the same issue, some changes added in v13.7.0 broke a bunch of my tests

cyyynthia commented 1 month ago

I initially reported as #1397 ; I noted that the checkbox behavior is implemented by doing an instanceof PointerEvent test that fails

PointerEvent should be a subclass of MouseEvent, and that check should check for instances of MouseEvent

capricorn86 commented 1 month ago

Thank you for reporting @VividLemon, @dbritto-dev and @cyyynthia! :slightly_smiling_face:

There is a fix in now: https://github.com/capricorn86/happy-dom/releases/tag/v14.10.2