Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BSlotComponent does not handle update events from underlying component #45

Closed
kikuomax opened this issue Aug 25, 2023 · 3 comments
Closed

BSlotComponent does not handle update events from underlying component #45

kikuomax opened this issue Aug 25, 2023 · 3 comments
Assignees
@kikuomax
Labels
bug Something isn't working

Comments

@kikuomax
Copy link
Collaborator

Overview of the problem

Buefy version: buefy-next (67ecf3a)
Vuejs version: 3.3.4
OS/Browser: macOS/@vue/test-utils

Description

<b-slot-component> does not handle update events from the underlying component.

Steps to reproduce

I encountered this while working on unit tests of SlotComponent:

This bug should affect TabItems with a custom header slot.

Expected behavior

Update events from the underlying component are processed.

Actual behavior

Update events from the underlying component are not processed.
@kikuomax
Copy link
Collaborator Author

The problem is twofold:

  1. Vue lifecycle events were renamed: hook:updated → vue:updated
  2. Vue 3 no longer provides $on and $off APIs

@wesdevpro
Copy link

wesdevpro commented Aug 25, 2023 •
edited

@kikuomax Problem number 1 does not seem like a huge issue
image

However, problem number 2 seems to be more of a concern

@kikuomax
Copy link
Collaborator Author

@wesdevpro I ended up with some dark arts:

  1. Exploit the undocumented second argument of onUpdated API.
  2. Directly manipulate VNode's props.

@kikuomax kikuomax self-assigned this Aug 29, 2023
@kikuomax kikuomax added the bug Something isn't working label Aug 29, 2023
kikuomax added a commit to kikuomax/buefy that referenced this issue Aug 29, 2023
@kikuomax
fix(lib): BSlotComponent not handle update events
79cc7dd 
- Fixes the issue that `BSlotComponent` does not handle update events
  from the underlying component. The problem turned out twofold:
    1. Vue 3 no longer provides `$on` and `$off` APIs, neither migration
       path. No "ad hoc" event handlers; all the event handlers have to
       be included in the definition or declaration of a component.
    2. "hook:updated" lifecycle event was renamed to "vue:updated", and
       Vue 3 handles lifecycle events differently from ordinary events.

  Workarounds:
    1. Directly manipulates VNode's props to associate an event handler
       "ad hoc", taking care of the variation of the prop name:
       capitalized, camelized, or kebab.
    2. Uses the undocumented second parameter for `onUpdated` API on
       Vue 3. Directly maniputes the component internal instance to
       remove the event handler.

issue ntohq#45
@kikuomax kikuomax mentioned this issue Aug 29, 2023
Merged
kikuomax added a commit that referenced this issue Aug 29, 2023
@kikuomax
test(lib): update SlotComponent spec
01efbf3 
- Updates the unit tests of `SlotComponent` so that they can work with
  `@vue/test-utils` V2, Vue 3, and breaking changes:
    - Calls `Component.vm.$forceUpdate` to emit the default "updated"
      lifecycle event instead of using `$emit`, because Vue 3
      differently handles lifecycle events from ordinary events.
    - Introduces a new test case "refresh on default event with existing
      handler" to test if `updated` hook of the underlying component is
      also invoked.
    - Introduces new test cases "refresh on custom event with existing
      handler (xyz)" to test if the event handler of the underlying
      component is also invoked. Same test is repeated for different
      casing of the property name.
    - Introduces a new test case "destroy with existing handler" to test
      if unmounting works when the underlying component has `updated`
      hook.
    - Introduces the following two new test cases to test if the handler
      for a custom event is removed when unmounted:
        - "destroy with custom event"
        - "destroy with custom event and existing handler"
    - Renames `wrapper.destroy` with `wrapper.unmount` because
      `@vue/test-utils` V2 did so.
    - Mocks `BSlotComponent.refresh` instead of specifying `methods` to
      `shallowMount`, because `@vue/test-utils` no longer handles
      `methods` option.
    - Replaces `h` parameter of a `render` function with the global `h`.
    - Repalces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Renames `propsData` option for `shallowMount` with `props` because
      `propsData` might be deprecated in the future.
    - However, the tests won't pass until we fix the following issues:
        - #44
        - #45

issue #1
kikuomax added a commit that referenced this issue Aug 31, 2023
@kikuomax
Fix: BSlotComponent does not handle update events from underlying com…
bbf09e7 
…ponent (#45) (#47)

* fix(lib): isVueComponent not working

- Fixes `isVueComponent` so that `SlotComponent` can determine if the
  underlying component is a Vue component instance and has a VNode.

  Only `SlotComponent` uses `isVueComponent`.

* fix(lib): BSlotComponent not handle update events

- Fixes the issue that `BSlotComponent` does not handle update events
  from the underlying component. The problem turned out twofold:
    1. Vue 3 no longer provides `$on` and `$off` APIs, neither migration
       path. No "ad hoc" event handlers; all the event handlers have to
       be included in the definition or declaration of a component.
    2. "hook:updated" lifecycle event was renamed to "vue:updated", and
       Vue 3 handles lifecycle events differently from ordinary events.

  Workarounds:
    1. Directly manipulates VNode's props to associate an event handler
       "ad hoc", taking care of the variation of the prop name:
       capitalized, camelized, or kebab.
    2. Uses the undocumented second parameter for `onUpdated` API on
       Vue 3. Directly maniputes the component internal instance to
       remove the event handler.

issue #45
kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 5, 2023
@kikuomax
test(lib): update SlotComponent spec
cf7e2f5 
- Updates the unit tests of `SlotComponent` so that they can work with
  `@vue/test-utils` V2, Vue 3, and breaking changes:
    - Calls `Component.vm.$forceUpdate` to emit the default "updated"
      lifecycle event instead of using `$emit`, because Vue 3
      differently handles lifecycle events from ordinary events.
    - Introduces a new test case "refresh on default event with existing
      handler" to test if `updated` hook of the underlying component is
      also invoked.
    - Introduces new test cases "refresh on custom event with existing
      handler (xyz)" to test if the event handler of the underlying
      component is also invoked. Same test is repeated for different
      casing of the property name.
    - Introduces a new test case "destroy with existing handler" to test
      if unmounting works when the underlying component has `updated`
      hook.
    - Introduces the following two new test cases to test if the handler
      for a custom event is removed when unmounted:
        - "destroy with custom event"
        - "destroy with custom event and existing handler"
    - Renames `wrapper.destroy` with `wrapper.unmount` because
      `@vue/test-utils` V2 did so.
    - Mocks `BSlotComponent.refresh` instead of specifying `methods` to
      `shallowMount`, because `@vue/test-utils` no longer handles
      `methods` option.
    - Replaces `h` parameter of a `render` function with the global `h`.
    - Repalces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Renames `propsData` option for `shallowMount` with `props` because
      `propsData` might be deprecated in the future.
    - However, the tests won't pass until we fix the following issues:
        - ntohq#44
        - ntohq#45

issue ntohq#1
wesdevpro pushed a commit that referenced this issue Sep 13, 2023
@kikuomax
test(lib): update SlotComponent spec (#97)
8730714 
- Updates the unit tests of `SlotComponent` so that they can work with
  `@vue/test-utils` V2, Vue 3, and breaking changes:
    - Calls `Component.vm.$forceUpdate` to emit the default "updated"
      lifecycle event instead of using `$emit`, because Vue 3
      differently handles lifecycle events from ordinary events.
    - Introduces a new test case "refresh on default event with existing
      handler" to test if `updated` hook of the underlying component is
      also invoked.
    - Introduces new test cases "refresh on custom event with existing
      handler (xyz)" to test if the event handler of the underlying
      component is also invoked. Same test is repeated for different
      casing of the property name.
    - Introduces a new test case "destroy with existing handler" to test
      if unmounting works when the underlying component has `updated`
      hook.
    - Introduces the following two new test cases to test if the handler
      for a custom event is removed when unmounted:
        - "destroy with custom event"
        - "destroy with custom event and existing handler"
    - Renames `wrapper.destroy` with `wrapper.unmount` because
      `@vue/test-utils` V2 did so.
    - Mocks `BSlotComponent.refresh` instead of specifying `methods` to
      `shallowMount`, because `@vue/test-utils` no longer handles
      `methods` option.
    - Replaces `h` parameter of a `render` function with the global `h`.
    - Repalces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Renames `propsData` option for `shallowMount` with `props` because
      `propsData` might be deprecated in the future.
    - However, the tests won't pass until we fix the following issues:
        - #44
        - #45

issue #1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kikuomax kikuomax

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kikuomax @wesdevpro