fix: improve accessible queries

Author: vmnavarro94

src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx

@@ -25,7 +25,7 @@ jest.mock(
   }) => (
     <button
       type="button"
-      data-testid={`action-button-${variant}`}
+      aria-label={`Action Button ${variant}`}
       onClick={onClick}
       {...props}
     >
@@ -39,7 +39,7 @@ jest.mock(
   () => ({ title, onConfirm, ...props }) => (
     <button
       type="button"
-      data-testid={`confirm-dialog-${title}`}
+      aria-label={`Confirm Dialog ${title}`}
       onClick={onConfirm}
       onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
       {...props}
@@ -79,14 +79,14 @@ describe('AssessmentActions', () => {
     render(<AssessmentActions />);
 
     expect(
-      screen.getByTestId('action-button-outline-primary'),
+      screen.getByLabelText('Action Button outline-primary'),
     ).toBeInTheDocument();
-    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(screen.getByLabelText('Action Button primary')).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Exit without saving'),
+      screen.getByLabelText('Confirm Dialog Exit without saving'),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Submit assessment'),
+      screen.getByLabelText('Confirm Dialog Submit assessment'),
     ).toBeInTheDocument();
   });
 
@@ -98,37 +98,41 @@ describe('AssessmentActions', () => {
     render(<AssessmentActions />);
 
     expect(
-      screen.getByTestId('action-button-outline-primary'),
+      screen.getByLabelText('Action Button outline-primary'),
     ).toBeInTheDocument();
-    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(screen.getByLabelText('Action Button primary')).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Exit without saving'),
+      screen.getByLabelText('Confirm Dialog Exit without saving'),
     ).toBeInTheDocument();
     expect(
-      screen.queryByTestId('confirm-dialog-Submit assessment'),
+      screen.queryByLabelText('Confirm Dialog Submit assessment'),
     ).not.toBeInTheDocument();
   });
 
   it('calls the correct handlers when buttons and dialogs are clicked', () => {
     render(<AssessmentActions />);
 
-    const exitButton = screen.getByTestId('action-button-outline-primary');
+    const exitButton = screen.getByLabelText('Action Button outline-primary');
     expect(exitButton).toHaveTextContent('Exit without saving');
     fireEvent.click(exitButton);
     expect(mockExitWithoutSavingAction.action.onClick).toHaveBeenCalled();
 
-    const submitButton = screen.getByTestId('action-button-primary');
+    const submitButton = screen.getByLabelText('Action Button primary');
     expect(submitButton).toHaveTextContent('Submit assessment');
     fireEvent.click(submitButton);
     expect(mockSubmitAssessmentAction.action.onClick).toHaveBeenCalled();
 
-    const exitDialog = screen.getByTestId('confirm-dialog-Exit without saving');
+    const exitDialog = screen.getByLabelText(
+      'Confirm Dialog Exit without saving',
+    );
     fireEvent.click(exitDialog);
     expect(
       mockExitWithoutSavingAction.confirmProps.onConfirm,
     ).toHaveBeenCalled();
 
-    const submitDialog = screen.getByTestId('confirm-dialog-Submit assessment');
+    const submitDialog = screen.getByLabelText(
+      'Confirm Dialog Submit assessment',
+    );
     fireEvent.click(submitDialog);
     expect(
       mockSubmitAssessmentAction.confirmProps.onConfirm,

src/components/FileUpload/index.test.jsx

@@ -26,14 +26,10 @@ jest.mock('./hooks', () => ({
   useFileUploadHooks: jest.fn(),
 }));
 
-jest.mock('./UploadConfirmModal', () => () => (
-  <div data-testid="upload-confirm-modal" />
-));
-jest.mock('./ActionCell', () => () => <div data-testid="action-cell" />);
-jest.mock('./FileDownload', () => () => <div data-testid="file-download" />);
-jest.mock('components/FilePreview', () => () => (
-  <div data-testid="file-preview" />
-));
+jest.mock('./UploadConfirmModal', () => () => <div>Upload Confirm Modal</div>);
+jest.mock('./ActionCell', () => () => <div>Action Cell</div>);
+jest.mock('./FileDownload', () => () => <div>File Download</div>);
+jest.mock('components/FilePreview', () => () => <div>File Preview</div>);
 
 const renderComponent = (props = {}) => render(
   <MemoryRouter>

src/views/AssessmentView/index.test.jsx

@@ -19,15 +19,11 @@ jest.mock('hooks/routing', () => ({
 
 jest.mock('./useAssessmentData', () => jest.fn());
 
-jest.mock('components/Prompt', () => () => <div data-testid="prompt" />);
-jest.mock('components/TextResponse', () => () => (
-  <div data-testid="text-response" />
-));
-jest.mock('components/FileUpload', () => () => (
-  <div data-testid="file-upload" />
-));
+jest.mock('components/Prompt', () => () => <div>Prompt</div>);
+jest.mock('components/TextResponse', () => () => <div>Text Response</div>);
+jest.mock('components/FileUpload', () => () => <div>File Upload</div>);
 jest.mock('./BaseAssessmentView', () => ({ children }) => (
-  <div data-testid="base-view">{children}</div>
+  <div>Base View {children}</div>
 ));
 
 const renderComponent = (component) => render(
@@ -60,9 +56,9 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    const prompts = screen.getAllByTestId('prompt');
+    const prompts = screen.getAllByText('Prompt');
     expect(prompts).toHaveLength(2);
-    expect(screen.queryByTestId('text-response')).not.toBeInTheDocument();
+    expect(screen.queryByText('Text Response')).not.toBeInTheDocument();
   });
 
   it('renders file upload when there are uploaded files', () => {
@@ -77,7 +73,7 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    expect(screen.getByTestId('file-upload')).toBeInTheDocument();
+    expect(screen.getByText('File Upload')).toBeInTheDocument();
   });
 
   it('does not render file upload when there are no files', () => {
@@ -92,6 +88,6 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    expect(screen.queryByTestId('file-upload')).not.toBeInTheDocument();
+    expect(screen.queryByText('File Upload')).not.toBeInTheDocument();
   });
 });

src/views/SubmissionView/index.test.jsx

@@ -9,22 +9,12 @@ jest.unmock('@openedx/paragon');
 jest.unmock('react');
 jest.unmock('@edx/frontend-platform/i18n');
 
-jest.mock('components/Rubric', () => () => <div data-testid="rubric" />);
-jest.mock('components/ModalActions', () => () => (
-  <div data-testid="modal-actions" />
-));
-jest.mock('components/FileUpload', () => () => (
-  <div data-testid="file-upload" />
-));
-jest.mock('components/Instructions', () => () => (
-  <div data-testid="instructions" />
-));
-jest.mock('components/StatusAlert', () => () => (
-  <div data-testid="status-alert" />
-));
-jest.mock('./SubmissionPrompts', () => () => (
-  <div data-testid="submission-prompts" />
-));
+jest.mock('components/Rubric', () => () => <div>Rubric</div>);
+jest.mock('components/ModalActions', () => () => <div>Modal Actions</div>);
+jest.mock('components/FileUpload', () => () => <div>File Upload</div>);
+jest.mock('components/Instructions', () => () => <div>Instructions</div>);
+jest.mock('components/StatusAlert', () => () => <div>Status Alert</div>);
+jest.mock('./SubmissionPrompts', () => () => <div>Submission Prompts</div>);
 jest.mock('./hooks', () => jest.fn());
 
 const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
@@ -50,9 +40,9 @@ describe('<SubmissionView />', () => {
   it('does not render rubric when showRubric is false', () => {
     renderWithIntl(<SubmissionView />);
 
-    expect(screen.queryByTestId('rubric')).not.toBeInTheDocument();
-    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
-    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
+    expect(screen.queryByText('Rubric')).not.toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
   });
 
   it('renders rubric when showRubric is true', () => {
@@ -62,8 +52,8 @@ describe('<SubmissionView />', () => {
     });
     renderWithIntl(<SubmissionView />);
 
-    expect(screen.getByTestId('rubric')).toBeInTheDocument();
-    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
-    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
+    expect(screen.getByText('Rubric')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
   });
 });