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.

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

BFieldBody cannot resolve BField #36

Closed
kikuomax opened this issue Aug 21, 2023 · 2 comments
Closed

BFieldBody cannot resolve BField #36

kikuomax opened this issue Aug 21, 2023 · 2 comments
Assignees
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-field-body> cannot resolve <b-field> unless <b-field> is globally installed; e.g., Buefy is installed as a plugin.
You will see warning like the following:

[Vue warn]: Failed to resolve component: b-field

or:

[Vue warn]: Component is missing template or render function.

Steps to reproduce

A user cannot directly use <b-field-body> because it is not exported from Buefy, though, I encountered this while working on unit tests of Colorpicker:

I have not confirmed on a browser but I think we could reproduce this if we specifically import Field without installing Buefy as a plugin and use it with horizontal flag:

<b-field horizontal label="test">
  <b-input type="text"></b-input>
</b-field>

Expected behavior

No warning is shown.

Actual behavior

The warning is shown.

@kikuomax
Copy link
Collaborator Author

This cannot be simply resolved because there is a circular dependency: FieldFieldBodyField → ...

kikuomax added a commit to kikuomax/buefy that referenced this issue Aug 21, 2023
- Fixes the issue that `FieldBody` was not able to resolve `Field`
  unless Buefy was installed as a plugin. Simply importing `Field` from
  `FieldBody` did not solve the problem because it caused a circular
  dependency: `Field` → `FieldBody` → `Field` → ...
  Instead, `FieldBody` injects the instance of parent `Field` as
  `parent` and obtains the type of `parent` via `parent.$.type`. This
  depends on Vue 3's internal structure (`$` to access the internal
  instance), though, I do not think Vue would break this anytime soon.

issue ntohq#36
kikuomax added a commit that referenced this issue Aug 22, 2023
- Fixes the issue that `FieldBody` was not able to resolve `Field`
  unless Buefy was installed as a plugin. Simply importing `Field` from
  `FieldBody` did not solve the problem because it caused a circular
  dependency: `Field` → `FieldBody` → `Field` → ...
  Instead, `FieldBody` injects the instance of parent `Field` as
  `parent` and obtains the type of `parent` via `parent.$.type`. This
  depends on Vue 3's internal structure (`$` to access the internal
  instance), though, I do not think Vue would break this anytime soon.

issue #36
kikuomax added a commit that referenced this issue Aug 22, 2023
- Updates the unit test (spec) of `Colorpicker` so that they can work
  with `@vue/test-utils` V2:
    - Refreshes the snapshot. Prevents some components from becoming
      stubs to better reproduce the legacy snapshot. This is necessary
      because `@vue/test-utils` V2 no longer renders the default slot of
      stubs. The legacy and new snapshots still look different, though,
      I believe they are essentially the same. The snapshot won't match
      until we address the issue #36.

issue #1
kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 5, 2023
- Updates the unit test (spec) of `Colorpicker` so that they can work
  with `@vue/test-utils` V2:
    - Refreshes the snapshot. Prevents some components from becoming
      stubs to better reproduce the legacy snapshot. This is necessary
      because `@vue/test-utils` V2 no longer renders the default slot of
      stubs. The legacy and new snapshots still look different, though,
      I believe they are essentially the same. The snapshot won't match
      until we address the issue ntohq#36.

issue ntohq#1
wesdevpro pushed a commit that referenced this issue Sep 16, 2023
* test(lib): update Colorpicker spec

- Updates the unit test (spec) of `Colorpicker` so that they can work
  with `@vue/test-utils` V2:
    - Refreshes the snapshot. Prevents some components from becoming
      stubs to better reproduce the legacy snapshot. This is necessary
      because `@vue/test-utils` V2 no longer renders the default slot of
      stubs. The legacy and new snapshots still look different, though,
      I believe they are essentially the same. The snapshot won't match
      until we address the issue #36.

issue #1

* test(lib): update ColorpickerAlphaSlider spec

- Updates the unit test (spec) of `ColorpickerAlphaSlider`:
    - Replaces `propsData` for `shallowMount` with `props` because
      `propsData` might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot.

issue #1

* test(lib): update ColorpickerHSLRepresentationSquare spec

- Updates the unit test (spec) of `ColorpickerHSLRepresentationSquare`:
    - Replaces `propsData` option for `shallowMount` with `props`
      because `propsData` might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot.

issue #1

* test(lib): update ColorpickerHSLRepresentationTriangle spec

- Updates the unit test (spec) of `ColorpickerHSLRepresentationTriangl`:
    - Replaces `propsData` option for `shallowMount` with `props`
      because `propsData` might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the new
      snapshot.

issue #1
@kikuomax kikuomax added the bug Something isn't working label Jan 10, 2024
@kikuomax kikuomax self-assigned this Jan 10, 2024
@kikuomax
Copy link
Collaborator Author

This should have been closed by #37.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: ✅ Done
Development

No branches or pull requests

1 participant