Standardize judgels-client test patterns (#882)

- Replace document.querySelector with testing-library selectors (getByRole,
  getByLabelText) for form inputs, selects, checkboxes
- Add aria-label to FormTable components for accessibility and testability
- Add role="article" to announcement/clarification cards, use role="link"
  for problem cards
- Replace document.querySelectorAll CSS class selectors with getAllByRole
- Improve table assertions to check cell content matrix instead of just
  getByText/row count
- Add missing nock.isDone() checks in ContestEditGeneralTab,
  ContestEditConfigsTab, and ContestEditDescriptionTab tests

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: fushar

judgels-client/src/components/forms/FormTableCheckbox/FormTableCheckbox.jsx

@@ -16,6 +16,7 @@ export function FormTableCheckbox(props) {
       <Checkbox
         defaultChecked={!!value}
         onChange={newOnChange}
+        aria-label={props.label}
         {...inputProps}
         className={classNames(getIntentClassName(meta))}
       />

judgels-client/src/components/forms/FormTableDateInput/FormTableDateInput.jsx

@@ -26,7 +26,7 @@ export function FormTableDateInput(props) {
         maxDate={new Date(4102444800000)}
         timePickerProps={{ showArrowButtons: true }}
         onChange={onChange}
-        inputProps={{ name: inputProps.name }}
+        inputProps={{ name: inputProps.name, 'aria-label': props.label }}
         {...inputProps}
       />
       <FormInputValidation meta={meta} />

judgels-client/src/components/forms/FormTableSelect/FormTableSelect.jsx

@@ -10,7 +10,7 @@ export function FormTableSelect(props) {
   const { input, meta, children } = props;
   return (
     <FormTableInput {...props}>
-      <HTMLSelect {...input} className={classNames(getIntentClassName(meta))}>
+      <HTMLSelect {...input} aria-label={props.label} className={classNames(getIntentClassName(meta))}>
         {children}
       </HTMLSelect>
     </FormTableInput>

judgels-client/src/components/forms/FormTableTextInput/FormTableTextInput.jsx

@@ -12,6 +12,7 @@ export function FormTableTextInput(props) {
         {...input}
         type={type || 'text'}
         disabled={disabled}
+        aria-label={props.label}
         className={classNames(Classes.INPUT, getIntentClassName(meta))}
       />
     </FormTableInput>

judgels-client/src/routes/admin/archives/ArchiveCreateDialog/ArchiveCreateDialog.test.jsx

@@ -29,16 +29,16 @@ describe('ArchiveCreateDialog', () => {
     const button = screen.getByRole('button');
     await user.click(button);
 
-    const slug = document.querySelector('input[name="slug"]');
+    const slug = screen.getByRole('textbox', { name: /slug/i });
     await user.type(slug, 'new-archive');
 
-    const name = document.querySelector('input[name="name"]');
+    const name = screen.getByRole('textbox', { name: /^name$/i });
     await user.type(name, 'New archive');
 
-    const category = document.querySelector('input[name="category"]');
+    const category = screen.getByRole('textbox', { name: /category/i });
     await user.type(category, 'New category');
 
-    const description = document.querySelector('textarea[name="description"]');
+    const description = screen.getByRole('textbox', { name: /description/i });
     await user.type(description, 'New description');
 
     nockJerahmeel()

judgels-client/src/routes/admin/users/UserViewPage/UserViewPage.test.jsx

@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import nock from 'nock';
 
@@ -40,18 +40,34 @@ describe('UserViewPage', () => {
   test('renders user details', async () => {
     await renderComponent();
 
-    expect(await screen.findAllByText(/andi/));
-    expect(screen.getByText('JIDUSER123')).toBeInTheDocument();
-    expect(screen.getByText('andi@example.com')).toBeInTheDocument();
-  });
-
-  test('renders user info', async () => {
-    await renderComponent();
-
-    expect(await screen.findByText(/Andi Smith/)).toBeInTheDocument();
-    expect(screen.getByText('Andi Smith')).toBeInTheDocument();
-    expect(screen.getByText('MALE')).toBeInTheDocument();
-    expect(screen.getByText('ID')).toBeInTheDocument();
+    await screen.findAllByText(/andi/);
+    const tables = screen.getAllByRole('table');
+    expect(
+      within(tables[0])
+        .getAllByRole('row')
+        .map(row =>
+          within(row)
+            .getAllByRole('cell')
+            .map(cell => cell.textContent)
+        )
+    ).toEqual([
+      ['JID', 'JIDUSER123'],
+      ['Email', 'andi@example.com'],
+    ]);
+
+    expect(
+      within(tables[1])
+        .getAllByRole('row')
+        .map(row =>
+          within(row)
+            .getAllByRole('cell')
+            .map(cell => cell.textContent)
+        )
+    ).toEqual([
+      ['Name', 'Andi Smith'],
+      ['Gender', 'MALE'],
+      ['Country', 'ID'],
+    ]);
   });
 
   test('user info form', async () => {
@@ -62,16 +78,16 @@ describe('UserViewPage', () => {
     const button = await screen.findByRole('button', { name: /edit/i });
     await user.click(button);
 
-    const name = document.querySelector('input[name="name"]');
+    const name = screen.getByRole('textbox', { name: /name/i });
     expect(name).toHaveValue('Andi Smith');
     await user.clear(name);
     await user.type(name, 'Caca');
 
-    const gender = document.querySelector('select[name="gender"]');
+    const gender = screen.getByRole('combobox', { name: /gender/i });
     expect(gender).toHaveValue('MALE');
     await user.selectOptions(gender, 'FEMALE');
 
-    const country = document.querySelector('select[name="country"]');
+    const country = screen.getByRole('combobox', { name: /country/i });
     expect(country).toHaveValue('ID');
     await user.selectOptions(country, 'US');
 

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementCard/ContestAnnouncementCard.jsx

@@ -41,7 +41,7 @@ export function ContestAnnouncementCard({
   };
 
   return (
-    <Callout className="contest-announcement-card" intent={intent} icon={null}>
+    <Callout role="article" className="contest-announcement-card" intent={intent} icon={null}>
       <Flex justifyContent="space-between">
         <h5>{announcement.title}</h5>
         <p>

judgels-client/src/routes/contests/contests/single/announcements/ContestAnnouncementsPage/ContestAnnouncementsPage.test.jsx

@@ -83,15 +83,15 @@ describe('ContestAnnouncementsPage', () => {
   test('renders placeholder when there are no announcements', async () => {
     await renderComponent({ announcements: [] });
     expect(await screen.findByText('No announcements.')).toBeInTheDocument();
-    expect(document.querySelectorAll('div.contest-announcement-card')).toHaveLength(0);
+    expect(screen.queryAllByRole('article')).toHaveLength(0);
   });
 
   test('renders announcements when not canSupervise', async () => {
     await renderComponent({ canSupervise: false });
     await waitFor(() => {
-      expect(document.querySelectorAll('div.contest-announcement-card').length).toBeGreaterThan(0);
+      expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
     });
-    const announcements = document.querySelectorAll('div.contest-announcement-card');
+    const announcements = screen.getAllByRole('article');
     expect(announcements).toHaveLength(2);
 
     expect(within(announcements[0]).getByRole('heading')).toHaveTextContent('Title 1');
@@ -106,9 +106,9 @@ describe('ContestAnnouncementsPage', () => {
   test('renders announcements when canSupervise', async () => {
     await renderComponent({ canSupervise: true });
     await waitFor(() => {
-      expect(document.querySelectorAll('div.contest-announcement-card').length).toBeGreaterThan(0);
+      expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
     });
-    const announcements = document.querySelectorAll('div.contest-announcement-card');
+    const announcements = screen.getAllByRole('article');
     expect(announcements).toHaveLength(2);
 
     expect(within(announcements[0]).getByRole('heading')).toHaveTextContent('Title 1');
@@ -123,9 +123,9 @@ describe('ContestAnnouncementsPage', () => {
   test('renders announcements when canManage', async () => {
     await renderComponent({ canSupervise: true, canManage: true });
     await waitFor(() => {
-      expect(document.querySelectorAll('div.contest-announcement-card').length).toBeGreaterThan(0);
+      expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
     });
-    const announcements = document.querySelectorAll('div.contest-announcement-card');
+    const announcements = screen.getAllByRole('article');
     expect(announcements).toHaveLength(2);
 
     expect(within(announcements[0]).getByRole('heading')).toHaveTextContent('Title 1');

judgels-client/src/routes/contests/contests/single/clarifications/ContestClarificationCard/ContestClarificationCard.jsx

@@ -79,7 +79,7 @@ export function ContestClarificationCard({
   };
 
   return (
-    <Callout className="contest-clarification-card" intent={questionIntent} icon={null}>
+    <Callout role="article" className="contest-clarification-card" intent={questionIntent} icon={null}>
       <Flex justifyContent="space-between">
         <h5>
           {clarification.title} &nbsp; <Tag>{topic}</Tag>
@@ -93,6 +93,7 @@ export function ContestClarificationCard({
       <hr />
       <div className="multiline-text">{clarification.question}</div>
       <Callout
+        role="article"
         className="contest-clarification-card contest-clarification-card__answer"
         intent={answerIntent}
         icon={null}

judgels-client/src/routes/contests/contests/single/clarifications/ContestClarificationsPage/ContestClarificationsPage.test.jsx

@@ -96,15 +96,15 @@ describe('ContestClarificationsPage', () => {
   test('renders placeholder when there are no clarifications', async () => {
     await renderComponent({ clarifications: [] });
     expect(await screen.findByText('No clarifications.')).toBeInTheDocument();
-    expect(document.querySelectorAll('div.contest-clarification-card')).toHaveLength(0);
+    expect(screen.queryAllByRole('article')).toHaveLength(0);
   });
 
   test('renders clarifications when not canSupervise', async () => {
     await renderComponent({ canSupervise: false });
     await waitFor(() => {
-      expect(document.querySelectorAll('div.contest-clarification-card').length).toBeGreaterThan(0);
+      expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
     });
-    const clarifications = document.querySelectorAll('div.contest-clarification-card');
+    const clarifications = screen.getAllByRole('article');
     expect(clarifications).toHaveLength(4);
 
     expect(within(clarifications[0]).getAllByRole('heading')[0]).toHaveTextContent('Title 1 General');
@@ -125,9 +125,9 @@ describe('ContestClarificationsPage', () => {
   test('renders clarifications when canSupervise', async () => {
     await renderComponent({ canSupervise: true });
     await waitFor(() => {
-      expect(document.querySelectorAll('div.contest-clarification-card').length).toBeGreaterThan(0);
+      expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
     });
-    const clarifications = document.querySelectorAll('div.contest-clarification-card');
+    const clarifications = screen.getAllByRole('article');
     expect(clarifications).toHaveLength(4);
 
     expect(within(clarifications[0]).getAllByRole('heading')[0]).toHaveTextContent('Title 1 General');