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 mockMetadataMixin = { | ||
|
Member
There was a problem hiding this comment. The Neither mock is necessary. import { metadataStrings } from 'shared/strings/metadataStrings';
// Instead of { name: /altText/i }:
screen.getByRole('checkbox', { name: metadataStrings.$tr('altText') });
// → 'Includes alternative text descriptions for images'
screen.getByRole('checkbox', { name: metadataStrings.$tr('highContrast') });
// → 'Includes high contrast text for learners with low vision'This also means the |
||
| methods: { | ||
| translateMetadataString: str => str, | ||
| }, | ||
| }; | ||
|
|
||
| const renderComponent = props => { | ||
| return render(AccessibilityOptions, { | ||
| props: { | ||
| kind: 'document', | ||
| value: [], | ||
| ...props, | ||
| }, | ||
| routes: [], | ||
|
Member
There was a problem hiding this comment.
|
||
| mixins: [mockMetadataMixin], | ||
| mocks: { | ||
| $tr: key => key, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| it('renders successfully', () => { | ||
| renderComponent(); | ||
| expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0); | ||
|
Member
There was a problem hiding this comment. This smoke test is made redundant by the |
||
| }); | ||
|
|
||
| it('shows document-specific accessibility options to the user', () => { | ||
|
LightCreator1007 marked this conversation as resolved.
|
||
| 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', () => { | ||
|
LightCreator1007 marked this conversation as resolved.
|
||
| renderComponent({ kind: 'audio' }); | ||
|
|
||
| const checkboxes = screen.getAllByRole('checkbox'); | ||
| expect(checkboxes).toHaveLength(1); | ||
| expect(screen.getByRole('checkbox', { name: /captionsSubtitles/i })).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('tooltip-captionsSubtitles')).not.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', () => { | ||
| it('emits an input event with the updated array when a user checks an option', async () => { | ||
|
LightCreator1007 marked this conversation as resolved.
|
||
| const { emitted } = renderComponent({ kind: 'document', value: [] }); | ||
|
|
||
| const altTextCheckbox = screen.getByRole('checkbox', { name: /altText/i }); | ||
|
LightCreator1007 marked this conversation as resolved.
|
||
| 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.
configure({ testIdAttribute: 'data-test' })should be called at module scope, not insidebeforeAll. Jest can initialize parts of the test infrastructure beforebeforeAllruns, so testId queries that fire during module loading would miss the configuration. TheafterAllrestore is also risky — if a test throws beforeafterAllexecutes,data-testidis never restored, silently breaking other test files that run after this one.Replace both blocks with a single module-scope call: