Convert accessibility options unit tests to Vue Testing Library #5794 #5889
+107
−74
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,134 @@ | ||
| import { render, screen, configure } from '@testing-library/vue'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import AccessibilityOptions from '../AccessibilityOptions.vue'; | ||
| import { AccessibilityCategories } from 'shared/constants'; | ||
|
|
||
| beforeAll(() => { | ||
| configure({ testIdAttribute: 'data-test' }); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| configure({ testIdAttribute: 'data-testid' }); | ||
| }); | ||
|
|
||
| describe('AccessibilityOptions', () => { | ||
| const mockConstantsMixin = {}; | ||
| const mockMetadataMixin = { | ||
| methods: { | ||
| translateMetadataString: str => str, | ||
| }, | ||
| }; | ||
|
|
||
| const renderComponent = props => { | ||
| return render(AccessibilityOptions, { | ||
| props: { | ||
| kind: 'document', | ||
| value: [], | ||
| ...props, | ||
| }, | ||
| routes: [], | ||
| mixins: [mockConstantsMixin, mockMetadataMixin], | ||
| mocks: { | ||
| $tr: key => key, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| it('renders successfully', () => { | ||
| renderComponent(); | ||
| expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0); | ||
| }); | ||
|
|
||
| it('shows document-specific accessibility options to the user', () => { | ||
|
Contributor
There was a problem hiding this comment. praise: Good adherence to VTL's query priority — |
||
| renderComponent({ kind: 'document' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(3); | ||
|
|
||
| expect(screen.getByRole('checkbox', { name: /altText/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox', { name: /highContrast/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox', { name: /taggedPdf/i })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('shows video-specific accessibility options to the user', () => { | ||
| renderComponent({ kind: 'video' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(3); | ||
|
|
||
| expect(screen.getByRole('checkbox', { name: /signLanguage/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox', { name: /audioDescription/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox', { name: /captionsSubtitles/i })).toBeInTheDocument(); | ||
|
|
||
| expect(screen.queryByTestId('tooltip-captionsSubtitles')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('shows exercise-specific accessibility options to the user', () => { | ||
| renderComponent({ kind: 'exercise' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(1); | ||
| expect(screen.getByRole('checkbox', { name: /altText/i })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('shows HTML5-specific accessibility options to the user', () => { | ||
| renderComponent({ kind: 'html5' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(2); | ||
| expect(screen.getByRole('checkbox', { name: /altText/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox', { name: /highContrast/i })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('shows audio-specific accessibility options to the user', () => { | ||
|
Contributor
There was a problem hiding this comment. suggestion: The original test for audio explicitly verified that |
||
| renderComponent({ kind: 'audio' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(1); | ||
| expect(screen.getByRole('checkbox', { name: /captionsSubtitles/i })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders informative tooltips next to the corresponding options', () => { | ||
| renderComponent({ kind: 'document' }); | ||
|
|
||
| expect(screen.getByTestId('tooltip-altText')).toBeInTheDocument(); | ||
| expect(screen.getByTestId('tooltip-highContrast')).toBeInTheDocument(); | ||
| expect(screen.getByTestId('tooltip-taggedPdf')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| describe('User Interactions and v-model', () => { | ||
|
Contributor
There was a problem hiding this comment. nitpick: |
||
| it('emits an input event with the updated array when a user checks an option', async () => { | ||
|
Contributor
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. |
||
| const { emitted } = renderComponent({ kind: 'document', value: [] }); | ||
|
|
||
| const altTextCheckbox = screen.getByRole('checkbox', { name: /altText/i }); | ||
| await userEvent.click(altTextCheckbox); | ||
|
|
||
| expect(emitted()).toHaveProperty('input'); | ||
| expect(emitted().input[0][0]).toEqual([AccessibilityCategories.ALT_TEXT]); | ||
| }); | ||
|
|
||
| it('emits an updated array with the item removed when a user unchecks a pre-checked option', async () => { | ||
| const { emitted } = renderComponent({ | ||
| kind: 'video', | ||
| value: [AccessibilityCategories.SIGN_LANGUAGE], | ||
| }); | ||
|
|
||
| const signLanguageCheckbox = screen.getByRole('checkbox', { name: /signLanguage/i }); | ||
| await userEvent.click(signLanguageCheckbox); | ||
|
|
||
| expect(emitted()).toHaveProperty('input'); | ||
| expect(emitted().input[0][0]).toEqual([]); | ||
| }); | ||
|
|
||
| it('renders correctly when accessibility options are pre-checked via v-model', () => { | ||
| renderComponent({ | ||
| kind: 'video', | ||
| value: [AccessibilityCategories.SIGN_LANGUAGE, AccessibilityCategories.CAPTIONS_SUBTITLES], | ||
| }); | ||
|
|
||
| expect(screen.getByRole('checkbox', { name: /signLanguage/i })).toBeChecked(); | ||
| expect(screen.getByRole('checkbox', { name: /captionsSubtitles/i })).toBeChecked(); | ||
| expect(screen.getByRole('checkbox', { name: /audioDescription/i })).not.toBeChecked(); | ||
| }); | ||
| }); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion:
mockConstantsMixin = {}is an empty object — when applied as a mixin it adds nothing, soconstantsTranslationMixinfrom the component still runs unmodified. If you intend to let the real mixin run (which is fine, since the tests pass), remove this from themixinsarray entirely to make that explicit. If you ever need to suppress its methods, populate it with actual stubs.