politico/vue-accessible-selects

Specs: add spec for "when I press enter, the component behaves as expected"

Open

#73 opened on Jan 29, 2021

View on GitHub
 (0 comments) (0 reactions) (1 assignee)Vue (5 forks)auto 404
good first issuetests

Repository metrics

Stars
 (12 stars)
PR merge metrics
 (PR metrics pending)

Description

Per this comment: https://github.com/politico/vue-accessible-selects/pull/71#discussion_r566815626

There are a couple things we'll want to test. Right now, SelectMulti.spec.ts only checks for behavior when clicking options. Let's add some initial specs for pressing enter, and lets add them to both SelectMulti.spec.ts and SelectSingle.spec.ts. Things like:

  1. When I press enter on an option, it's selected.
  2. When I press enter on an option, it emits the correct event(s)
  3. (multi) When I press enter on a selected option, it's unselected
  4. (multi) When I press enter not on an option, no event is emitted/nothing happens
  5. (multi) When I press enter while on a selected pill, it's unselected

Contributor guide

Research direction
Examine the existing SelectMulti.spec.ts and SelectSingle.spec.ts files to understand the testing setup pattern, then replicate it for keyboard press scenarios. Look at the component implementation for how 'enter' key interactions are handled.
Tech stack
vuetypescriptjavascript
Domain
frontend
Issue type
Test
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
VueTesting (Jest/Vitest)
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90