Convert accessibility options unit tests to Vue Testing Library #5794#5889
Conversation
- covered all the original tests. - coverage includes user interaction tests.
|
👋 Hi @LightCreator1007, thanks for contributing! For the review process to begin, please verify that the following is satisfied:
Also check that issue requirements are satisfied & you ran Pull requests that don't follow the guidelines will be closed. Reviewer assignment can take up to 2 weeks. |
akolson
requested review from
rtibbles and
rtibblesbot
and removed request for
rtibbles
|
📢✨ Before we assign a reviewer, we'll turn on |
rtibblesbot
left a comment
rtibblesbot
left a comment
There was a problem hiding this comment.
Clean VTL migration with real improvements over the original.
CI passing. No UI files changed — Phase 3 skipped. Screenshot and video confirm the Accessibility section in the Edit Details modal, matching what the tests cover.
- suggestion:
mockConstantsMixin = {}is a no-op — see inline - suggestion: audio test drops tooltip-absence assertion from original — see inline
- nitpick:
v-modelin describe block name — see inline - praise: semantic role queries and new interaction coverage — see inline
@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?
Reviewed the pull request diff checking for:
- Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
- Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
- Architecture: duplicated concerns, minimal interfaces, composition over inheritance
- Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
- Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
- Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
- Checked CI status and linked issue acceptance criteria
- For UI changes: inspected screenshots for layout, visual completeness, and consistency
| it('smoke test', () => { | ||
| const wrapper = shallowMount(AccessibilityOptions, { | ||
| propsData: { | ||
| const mockConstantsMixin = {}; |
There was a problem hiding this comment.
suggestion: mockConstantsMixin = {} is an empty object — when applied as a mixin it adds nothing, so constantsTranslationMixin from the component still runs unmodified. If you intend to let the real mixin run (which is fine, since the tests pass), remove this from the mixins array entirely to make that explicit. If you ever need to suppress its methods, populate it with actual stubs.
| kind: 'audio', | ||
| }, | ||
| }); | ||
| it('shows audio-specific accessibility options to the user', () => { |
There was a problem hiding this comment.
suggestion: The original test for audio explicitly verified that tooltip-captionsSubtitles is absent ([data-test="tooltip-captionsSubtitles"] → exists() === false). The new audio test doesn't carry this forward. The video test at line 63 covers the same HideTooltips code path, but adding expect(screen.queryByTestId('tooltip-captionsSubtitles')).not.toBeInTheDocument() here keeps the audio test self-contained and preserves that explicit intent.
| expect(screen.getByTestId('tooltip-taggedPdf')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| describe('User Interactions and v-model', () => { |
There was a problem hiding this comment.
nitpick: 'User Interactions and v-model' names an implementation detail (v-model). 'User Interactions' describes the same tests without leaking the binding mechanism.
| kind: 'document', | ||
| }, | ||
| }); | ||
| it('shows document-specific accessibility options to the user', () => { |
There was a problem hiding this comment.
praise: Good adherence to VTL's query priority — getByRole('checkbox', { name: /altText/i }) over the old findComponent('[data-test="checkbox-altText"]'). Falling back to getByTestId only for tooltips (which lack a distinctive ARIA role) is the right call, and the configure/reset pair in beforeAll/afterAll cleanly handles the data-test vs data-testid mismatch.
| }); | ||
|
|
||
| describe('User Interactions and v-model', () => { | ||
| it('emits an input event with the updated array when a user checks an option', async () => { |
There was a problem hiding this comment.
praise: The new interaction sub-suite (check, uncheck, pre-checked state) goes beyond mechanical migration — it's coverage that the original never had and that directly exercises the v-model contract. Good addition.
2 participants
Summary
vue-testing-library.getByRoleinstead ofgetByTestId).Screencast.From.2026-05-09.20-37-55.mp4
References
Closes #5794
Reviewer guidance
Run
pnpm test channelEdit/components/edit/__tests__/accessibilityOptions.spec.jsto test whether all 10 tests are passing or not.
Note on Tooltips: Tooltip elements currently seem to render as SVGs inside spans . So i thought of falling back to using getByTestId for the tooltip assertions.
AI usage
Code was adjusted, troubleshot and tested for bugs iteratively in collaboration with gemini and claude. Reviewed and audited to the best of my abilites to ensure integrity and correctness of code.