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

Burger menu of <b-navbar> has unexpected "aria-expanded" with false #29

Closed
kikuomax opened this issue Aug 14, 2023 · 0 comments
Closed

Burger menu of <b-navbar> has unexpected "aria-expanded" with false #29

kikuomax opened this issue Aug 14, 2023 · 0 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, Safari

Description

<b-navbar> has <a> element representing the burger menu with aria-expanded attribute containing false when the menu is closed.

Steps to reproduce

<b-navbar></b-navbar>

I encountered this while working on unit tests of Navbar:

Expected behavior

<a role="button" class="navbar-burger burger" aria-label="menu" tabindex="0">
  ...
</a>

Actual behavior

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" tabindex="0">
  ...
</a>
@kikuomax kikuomax added the bug Something isn't working label Aug 14, 2023
@kikuomax kikuomax changed the title Burger menu of <b-navbar> has extra "aria-expanded" with false Burger menu of <b-navbar> has unexpected "aria-expanded" with false Aug 14, 2023
kikuomax added a commit to kikuomax/buefy that referenced this issue Aug 14, 2023
@kikuomax
fix(lib): unexpected aria-expanded on navbar
5de7be3 
- Fixes the issue where a closed burger menu on `BNavbar` had
  `aria-expanded` attribute with `false`. This bug was caused due to the
  changed behavior of Vue 2 → 3, that Vue 3 no longer removes a boolean
  attribute with `false`. Binds `undefined` if a burger menu is not
  opened.

issue ntohq#29
@kikuomax kikuomax mentioned this issue Aug 14, 2023
Merged
kikuomax added a commit that referenced this issue Aug 14, 2023
@kikuomax
test(lib): update Navbar spec
f080fe9 
- Updates the unit tests (spec) of `Navbar` so that they can work with
  `@vue/test-utils` V2 and breaking changes:
    - Corrects v-model bindings:
        - property: `active` → `modelValue`
        - event: `update:active` → `update:modelValue`
    - Replaces `wrapper.contains` with a combination of `find` and
      `exists` because `wrapper.contains` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` and `wrapper.trigger` to make sure the
      subsequent tests verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` for `mount` with `props` because `propsData`
      might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snpshot won't match until we fix the issue
      #29.
    - The tests won't pass until we fix the issue #28.

issue #1
kikuomax added a commit that referenced this issue Aug 14, 2023
@kikuomax
test(lib): update NavbarBurger spec
31a775c 
- Updates the unit tests (spec) of `NavbarBurger` so that they can work
  with `@vue/test-utils` V2:
    - Specifies the element tag to the selector given to `wrapper.find`
      instead of testing the tag with `is`. Because `is` no longer
      exists in `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent assertions
      verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snapshot won't match until we fix the issue
      #29.

issue #1
wesdevpro pushed a commit that referenced this issue Aug 14, 2023
@kikuomax
fix(lib): unexpected aria-expanded on navbar (#31)
d826d71 
- Fixes the issue where a closed burger menu on `BNavbar` had
  `aria-expanded` attribute with `false`. This bug was caused due to the
  changed behavior of Vue 2 → 3, that Vue 3 no longer removes a boolean
  attribute with `false`. Binds `undefined` if a burger menu is not
  opened.

issue #29
@kikuomax kikuomax self-assigned this Aug 30, 2023
kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 4, 2023
@kikuomax
test(lib): update Navbar spec
fc817c8 
- Updates the unit tests (spec) of `Navbar` so that they can work with
  `@vue/test-utils` V2 and breaking changes:
    - Corrects v-model bindings:
        - property: `active` → `modelValue`
        - event: `update:active` → `update:modelValue`
    - Replaces `wrapper.contains` with a combination of `find` and
      `exists` because `wrapper.contains` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` and `wrapper.trigger` to make sure the
      subsequent tests verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` for `mount` with `props` because `propsData`
      might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snpshot won't match until we fix the issue
      ntohq#29.
    - The tests won't pass until we fix the issue ntohq#28.

issue ntohq#1
kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 4, 2023
@kikuomax
test(lib): update NavbarBurger spec
d6f746a 
- Updates the unit tests (spec) of `NavbarBurger` so that they can work
  with `@vue/test-utils` V2:
    - Specifies the element tag to the selector given to `wrapper.find`
      instead of testing the tag with `is`. Because `is` no longer
      exists in `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent assertions
      verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snapshot won't match until we fix the issue
      ntohq#29.

issue ntohq#1
wesdevpro pushed a commit that referenced this issue Sep 16, 2023
@kikuomax
Port spec for Navbar (#83)
5498605 
* test(lib): update Navbar spec

- Updates the unit tests (spec) of `Navbar` so that they can work with
  `@vue/test-utils` V2 and breaking changes:
    - Corrects v-model bindings:
        - property: `active` → `modelValue`
        - event: `update:active` → `update:modelValue`
    - Replaces `wrapper.contains` with a combination of `find` and
      `exists` because `wrapper.contains` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` and `wrapper.trigger` to make sure the
      subsequent tests verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` for `mount` with `props` because `propsData`
      might be deprecated in the future.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snpshot won't match until we fix the issue
      #29.
    - The tests won't pass until we fix the issue #28.

issue #1

* test(lib): update NavbarBurger spec

- Updates the unit tests (spec) of `NavbarBurger` so that they can work
  with `@vue/test-utils` V2:
    - Specifies the element tag to the selector given to `wrapper.find`
      instead of testing the tag with `is`. Because `is` no longer
      exists in `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent assertions
      verify the updated state.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Refreshes the snapshot. I did not find any problems in the updated
      snapshot. However, the snapshot won't match until we fix the issue
      #29.

issue #1

* test(lib): update NavbarItem spec

- Updates the unit tests (spec) of `NavbarItem` so that they can work
  with `@vue/test-utils` V2 and Vue 3:
    - Replaces `listeners` option for `shallowMount` with `on{event}`
      props, because `listeners` no longer works on `@vue/test-utils` V2
      but `on{event}` prop does the equivalent job on Vue 3 instead.
    - Mounts `stubBNavBar` and inserts `BNavbarItem` into its default
      slot instead of specifying `stubBNavBar` as `parentComponents`,
      because `parentComponents` no longer works on `@vue/test-utils`
      V2.
    - Replaces `wrapper.contains` with a combination of `find` and
      `exists` because `wrapper.contains` no longer exists in
      `@vue/test-utils` V2.
    - A test on a tag name is merged with a selector given to `find`.
    - Awaits `wrapper.setProps` to make sure the subsequent assertions
      verify the updated state.
    - Replaces `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.
    - Fixes the event type for "click": `KeyboardEvent` → `MouseEvent`.
    - Replaces `sinon.stub` with `jest.fn`. No longer imports `sinon`.

issue #1

* test(lib): update NavbarDropdown spec

- Updates the unit tests (spec) of `NavbarDropdown` so that they can
  work with `@vue/test-utils` V2:
    - Awaits `wrapper.setProps` to make sure the subsequent assertions
      verify the updated state.
    - Replaces `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 loger exists in
      `@vue/test-utils` V2.
    - Refreshes the snapshot. I found the updated snapshot had two
      `div` elements with `navbar-dropdown` class, but this is fine
      because they were introduced after the old snapshot was recorded.

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
1 participant
@kikuomax