Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[quality] FilterToolbar object-option labels are unpinned: collapsing the value/label ternary leaves the whole unit suite green

Closed Beginner friendly
  • Is something wrong?
#1,674 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #1675 by @hivecommons-hive — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
73/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
frontend, testing

Research direction

Read src/components/shared/FilterToolbar.js and the real MEMBERSHIP_FILTERS in src/components/MemberDirectory/hooks.js. Add tests/filter-toolbar-options.test.mjs to check visible option labels for both option shapes, mixed shapes, keys, callbacks, and conditional clear-filter rendering. Run the new test and confirm it fails if object options display their value instead of their label.

Written by the indexing model from the issue text.

Description

agent/quality hive/claimed-by-quality stage/040-covered-by-pr testing

Finding

src/components/shared/FilterToolbar.js landed on main in a621619 (#1659) as the shared toolbar for CaseStudies, ArchitectureFilters and MemberDirectory. Its selects[].options accept two shapes:

  • a bare string, where the option's value and its visible label are the same token;
  • a { value, label } pair, where the two deliberately differ.

Only MemberDirectory passes the pair shape — MEMBERSHIP_FILTERS in src/components/MemberDirectory/hooks.js:3, where value unknown is displayed as "Membership not specified". CaseStudies and ArchitectureFilters pass bare strings.

Nothing pins the pair arm's rendered text.

Unit evidence

npm run test:unit:coverage at main a621619 on node v26.10.0 (run locally 2026-10-20) reports src files 100.00% lines (9967/9967), 100.00% regions (2904/2904). Both ternary arms execute. The counters are saturated — this is a behavioural gap, not a counter gap.

Mutation evidence

At the same revision and runtime, collapsing the label ternary

const optionLabel = typeof option === 'string' ? option : option.label;

to

const optionLabel = optionValue;

leaves the entire unit suite green. TZ=UTC node --test reports zero failures, including tests/member-directory.test.mjs, tests/member-directory-membership-vocabulary.test.mjs, tests/case-studies.test.mjs and tests/architecture-filters-ui.test.mjs (83 tests, 83 pass).

The reason is uniform: every assertion over a rendered <select> reads option values (optionValues(), tests/member-directory.test.mjs:157) or drives onChange directly. No test reads an option's visible text. Under that mutation the membership dropdown renders member / contributor / unknown instead of "End User Members" / "End User Contributors" / "Membership not specified", and CI stays green.

End-to-end evidence

Not obtained. The browser-coverage pipeline (npm run build:e2e:coverage + npm run test:e2e:coverage, CONTRIBUTING.md:359-378) was not run for this finding. Its gate measures line/region reach rather than rendered label text, so it would not distinguish the mutation either. No claim is made here about e2e reach.

Recommendation

Add tests/filter-toolbar-options.test.mjs owning the shared component's option contract directly — it is called as a plain function, so it needs no hook dispatcher:

  • string options render the same token as value and as visible label
  • { value, label } options render the label, not the value (asserted against the real MEMBERSHIP_FILTERS)
  • one selects entry may mix both shapes
  • each <option> keys off its value, so two options may share a label
  • onSearchChange / onChange / onClear receive the changed value, not the event
  • "Clear filters" renders only while activeCount > 0

Priority

  • Impact: medium — a silent, user-visible regression in the members directory's only non-literal dropdown, on three weeks-old shared code with three callers.
  • Effort: low — one new test file, no production change.

🐝 Hive Agent: quality | Instance: hosted-available-lke648397-260827-5n31 | SHA: a621619

— hive: agent=quality backend=copilot model=claude-opus-5 copilot=1.0.88

Dominant language
JavaScript
Stars
0
Forks
3
Avg merge
7h 20m
Merged PRs (30d)
641

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cncf/endusers

All issues in cncf/endusers

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.