Skip to content

Commit 8c9c52a

Browse files
vmnavarro94vmnavarro94
committed
fix: improve accessible queries
1 parent 1c5bf97 commit 8c9c52a

File tree

5 files changed

+48
-55
lines changed

5 files changed

+48
-55
lines changed

‎src/components/Assessment/index.test.jsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,9 @@ jest.mock('./useAssessmentData', () => ({
1313
useAssessmentData: jest.fn(),
1414
}));
1515

16-
jest.mock('./EditableAssessment', () => () => (
17-
<div data-testid="editable-assessment" />
18-
));
16+
jest.mock('./EditableAssessment', () => () => <div>Editable Assessment</div>);
1917

20-
jest.mock('./ReadonlyAssessment', () => () => (
21-
<div data-testid="readonly-assessment" />
22-
));
18+
jest.mock('./ReadonlyAssessment', () => () => <div>Readonly Assessment</div>);
2319

2420
const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
2521

@@ -35,8 +31,8 @@ describe('<Assessment />', () => {
3531
});
3632
renderWithIntl(<Assessment />);
3733

38-
expect(screen.getByTestId('readonly-assessment')).toBeInTheDocument();
39-
expect(screen.queryByTestId('editable-assessment')).not.toBeInTheDocument();
34+
expect(screen.getByText('Readonly Assessment')).toBeInTheDocument();
35+
expect(screen.queryByText('Editable Assessment')).not.toBeInTheDocument();
4036
});
4137

4238
it('renders the EditableAssessment when assessment has not been submitted', () => {
@@ -46,8 +42,8 @@ describe('<Assessment />', () => {
4642
});
4743
renderWithIntl(<Assessment />);
4844

49-
expect(screen.getByTestId('editable-assessment')).toBeInTheDocument();
50-
expect(screen.queryByTestId('readonly-assessment')).not.toBeInTheDocument();
45+
expect(screen.getByText('Editable Assessment')).toBeInTheDocument();
46+
expect(screen.queryByText('Readonly Assessment')).not.toBeInTheDocument();
5147
});
5248

5349
it('renders nothing when assessment data is not initialized', () => {

‎src/components/ProgressBar/index.test.jsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ jest.mock('utils', () => ({
3434
}));
3535

3636
jest.mock('./ProgressStep', () => ({ step }) => (
37-
<div data-testid="progress-step" data-step={step} />
37+
<div data-step={step}>Progress Step {step}</div>
3838
));
3939

4040
const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
@@ -74,12 +74,12 @@ describe('<ProgressBar />', () => {
7474

7575
renderWithIntl(<ProgressBar {...props} />);
7676

77-
const steps = screen.getAllByTestId('progress-step');
78-
expect(steps).toHaveLength(5);
79-
expect(steps[0]).toHaveAttribute('data-step', stepNames.submission);
80-
expect(steps[1]).toHaveAttribute('data-step', stepNames.studentTraining);
81-
expect(steps[2]).toHaveAttribute('data-step', stepNames.self);
82-
expect(steps[3]).toHaveAttribute('data-step', stepNames.peer);
83-
expect(steps[4]).toHaveAttribute('data-step', stepNames.done);
77+
expect(screen.getByText('Progress Step submission')).toBeInTheDocument();
78+
expect(
79+
screen.getByText('Progress Step studentTraining'),
80+
).toBeInTheDocument();
81+
expect(screen.getByText('Progress Step self')).toBeInTheDocument();
82+
expect(screen.getByText('Progress Step peer')).toBeInTheDocument();
83+
expect(screen.getByText('Progress Step done')).toBeInTheDocument();
8484
});
8585
});

‎src/views/GradeView/Content.test.jsx

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,14 @@ jest.mock('hooks/app', () => ({
1919
useEffectiveGradeStep: jest.fn(),
2020
}));
2121

22-
jest.mock('components/FileUpload', () => () => (
23-
<div data-testid="file-upload" />
24-
));
22+
jest.mock('components/FileUpload', () => () => <div>File Upload</div>);
2523

2624
jest.mock('components/Prompt', () => ({ prompt }) => (
27-
<div data-testid="prompt">{prompt}</div>
25+
<div>Prompt: {prompt}</div>
2826
));
2927

3028
jest.mock('components/TextResponse', () => ({ response }) => (
31-
<div data-testid="text-response">{response}</div>
29+
<div>Text Response: {response}</div>
3230
));
3331

3432
const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
@@ -45,9 +43,9 @@ describe('<Content />', () => {
4543

4644
renderWithIntl(<Content />);
4745

48-
expect(screen.queryByTestId('prompt')).not.toBeInTheDocument();
49-
expect(screen.queryByTestId('text-response')).not.toBeInTheDocument();
50-
expect(screen.getByTestId('file-upload')).toBeInTheDocument();
46+
expect(screen.queryByText(/^Prompt:/)).not.toBeInTheDocument();
47+
expect(screen.queryByText(/^Text Response:/)).not.toBeInTheDocument();
48+
expect(screen.getByText('File Upload')).toBeInTheDocument();
5149
expect(screen.queryByText(/peer/i)).not.toBeInTheDocument();
5250
});
5351

@@ -61,17 +59,17 @@ describe('<Content />', () => {
6159

6260
renderWithIntl(<Content />);
6361

64-
const prompts = screen.getAllByTestId('prompt');
65-
expect(prompts).toHaveLength(2);
66-
expect(prompts[0]).toHaveTextContent('prompt1');
67-
expect(prompts[1]).toHaveTextContent('prompt2');
62+
expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
63+
expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
6864

69-
const responses = screen.getAllByTestId('text-response');
70-
expect(responses).toHaveLength(2);
71-
expect(responses[0]).toHaveTextContent('text response 1');
72-
expect(responses[1]).toHaveTextContent('text response 2');
65+
expect(
66+
screen.getByText('Text Response: text response 1'),
67+
).toBeInTheDocument();
68+
expect(
69+
screen.getByText('Text Response: text response 2'),
70+
).toBeInTheDocument();
7371

74-
expect(screen.getByTestId('file-upload')).toBeInTheDocument();
72+
expect(screen.getByText('File Upload')).toBeInTheDocument();
7573
expect(screen.getByText(/peer/i)).toBeInTheDocument();
7674
});
7775
});

‎src/views/GradeView/FinalGrade.test.jsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jest.mock('hooks/app', () => ({
1919
}));
2020

2121
jest.mock('components/Assessment/ReadonlyAssessment', () => ({ step }) => (
22-
<div data-testid="readonly-assessment" data-step={step} />
22+
<div data-step={step}>Readonly Assessment {step}</div>
2323
));
2424

2525
const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
@@ -46,10 +46,8 @@ describe('<FinalGrade />', () => {
4646

4747
renderWithIntl(<FinalGrade />);
4848

49-
const assessments = screen.getAllByTestId('readonly-assessment');
50-
expect(assessments).toHaveLength(2);
51-
expect(assessments[0]).toHaveAttribute('data-step', stepNames.self);
52-
expect(assessments[1]).toHaveAttribute('data-step', stepNames.peer);
49+
expect(screen.getByText('Readonly Assessment self')).toBeInTheDocument();
50+
expect(screen.getByText('Readonly Assessment peer')).toBeInTheDocument();
5351
});
5452

5553
it('renders only peer assessment when self is not available', () => {
@@ -66,8 +64,9 @@ describe('<FinalGrade />', () => {
6664

6765
renderWithIntl(<FinalGrade />);
6866

69-
const assessments = screen.getAllByTestId('readonly-assessment');
70-
expect(assessments).toHaveLength(1);
71-
expect(assessments[0]).toHaveAttribute('data-step', stepNames.peer);
67+
expect(screen.getByText('Readonly Assessment peer')).toBeInTheDocument();
68+
expect(
69+
screen.queryByText('Readonly Assessment self'),
70+
).not.toBeInTheDocument();
7271
});
7372
});

‎src/views/SubmissionView/index.test.jsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ jest.unmock('@openedx/paragon');
99
jest.unmock('react');
1010
jest.unmock('@edx/frontend-platform/i18n');
1111

12-
jest.mock('components/Rubric', () => () => <div data-testid="rubric" />);
12+
jest.mock('components/Rubric', () => () => <div>Rubric</div>);
1313
jest.mock('components/ModalActions', () => () => (
14-
<div data-testid="modal-actions" />
14+
<div>Modal Actions</div>
1515
));
1616
jest.mock('components/FileUpload', () => () => (
17-
<div data-testid="file-upload" />
17+
<div>File Upload</div>
1818
));
1919
jest.mock('components/Instructions', () => () => (
20-
<div data-testid="instructions" />
20+
<div>Instructions</div>
2121
));
2222
jest.mock('components/StatusAlert', () => () => (
23-
<div data-testid="status-alert" />
23+
<div>Status Alert</div>
2424
));
2525
jest.mock('./SubmissionPrompts', () => () => (
26-
<div data-testid="submission-prompts" />
26+
<div>Submission Prompts</div>
2727
));
2828
jest.mock('./hooks', () => jest.fn());
2929

@@ -54,9 +54,9 @@ describe('<SubmissionView />', () => {
5454
it('does not render rubric when showRubric is false', () => {
5555
renderWithIntl(<SubmissionView />);
5656

57-
expect(screen.queryByTestId('rubric')).not.toBeInTheDocument();
58-
expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
59-
expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
57+
expect(screen.queryByText('Rubric')).not.toBeInTheDocument();
58+
expect(screen.getByText('Modal Actions')).toBeInTheDocument();
59+
expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
6060
});
6161

6262
it('renders rubric when showRubric is true', () => {
@@ -66,8 +66,8 @@ describe('<SubmissionView />', () => {
6666
});
6767
renderWithIntl(<SubmissionView />);
6868

69-
expect(screen.getByTestId('rubric')).toBeInTheDocument();
70-
expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
71-
expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
69+
expect(screen.getByText('Rubric')).toBeInTheDocument();
70+
expect(screen.getByText('Modal Actions')).toBeInTheDocument();
71+
expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
7272
});
7373
});

0 commit comments

Comments
 (0)