UIBULKED-408: Bulk edit - Add accessibility testing to automated tests (

#479)

CHANGELOG.md

@@ -94,8 +94,10 @@
 * [UIBULKED-351](https://issues.folio.org/browse/UIBULKED-351) Hide Query tab
 * [UIBULKED-276](https://issues.folio.org/browse/UIBULKED-276) Rename "Instance" column for holdings records preview
 * [UIBULKED-352](https://issues.folio.org/browse/UIBULKED-352) Localize numbers displayed in bulk edit
+* [UIBULKED-408](https://issues.folio.org/browse/UIBULKED-408) Bulk edit - Add accessibility testing to automated tests.
 * [UIBULKED-210](https://issues.folio.org/browse/UIBULKED-210) Improve user errors for invalid data - IncorrectTokenCountException error.
 
+
 ## [3.0.5](https://github.com/folio-org/ui-bulk-edit/tree/v3.0.5) (2023-03-22)
 
 * [UIBULKED-264](https://issues.folio.org/browse/UIBULKED-264) "Download matched records (CSV)" option is enabled on the confirmation screen

src/components/BulkEditActionMenu/BulkEditActionMenu.test.js

@@ -7,6 +7,7 @@ import { QueryClientProvider } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
 import '../../../test/jest/__mock__';
+import { runAxeTest } from '@folio/stripes-testing';
 import { bulkEditLogsData } from '../../../test/jest/__mock__/fakeData';
 import { queryClient } from '../../../test/jest/utils/queryClient';
 
@@ -250,4 +251,12 @@ describe('BulkEditActionMenu', () => {
 
     expect(setVisibleColumns).not.toHaveBeenCalledWith();
   });
+
+  it('should render with no axe errors', async () => {
+    renderBulkEditActionMenu({ step: EDITING_STEPS.UPLOAD, capability: CAPABILITIES.USER });
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
 });

src/components/BulkEditList/BulkEditList.test.js

@@ -7,13 +7,13 @@ import '../../../test/jest/__mock__';
 
 import userEvent from '@testing-library/user-event';
 import { useOkapiKy } from '@folio/stripes/core';
+import { runAxeTest } from '@folio/stripes-testing';
 import { queryClient } from '../../../test/jest/utils/queryClient';
 
 import { CAPABILITIES, IDENTIFIERS, CRITERIA } from '../../constants';
 
 import { BulkEditList } from './BulkEditList';
 
-
 jest.mock('../BulkEditLogs/BulkEditLogs', () => {
   return jest.fn().mockReturnValue('BulkEditLogs');
 });
@@ -69,6 +69,14 @@ describe('BulkEditList', () => {
     expect(screen.getByText(/holdings/i)).toBeVisible();
   });
 
+  it('should render with no axe errors', async () => {
+    renderBulkEditList({ criteria: CRITERIA.LOGS });
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
   it('should display Logs pane when criteria is logs', async () => {
     renderBulkEditList({ criteria: CRITERIA.LOGS });
 

src/components/BulkEditList/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/AdditionalActionParameters.test.js

@@ -1,8 +1,9 @@
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { runAxeTest } from '@folio/stripes-testing'; // for expect assertions
 import { AdditionalActionParameters } from './AdditionalActionParameters';
 import { ACTIONS, PARAMETERS_KEYS } from '../../../../../constants';
-import { ACTION_PARAMETERS_KEY } from './helpers'; // for expect assertions
+import { ACTION_PARAMETERS_KEY } from './helpers';
 
 describe('AdditionalActionParameters', () => {
   const mockAction = {
@@ -41,6 +42,16 @@ describe('AdditionalActionParameters', () => {
     expect(getByLabelText(`ui-bulk-edit.layer.action.apply.${PARAMETERS_KEYS.APPLY_TO_ITEMS}`)).toBeInTheDocument();
   });
 
+  it('should render with no axe errors', async () => {
+    render(
+      <AdditionalActionParameters action={mockAction} actionIndex={0} onChange={() => {}} />
+    );
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
   it('calls onChange with updated parameters when a checkbox is clicked', () => {
     const mockOnChange = jest.fn();
 

src/components/BulkEditList/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.test.js

@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from 'react-query';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
+import { runAxeTest } from '@folio/stripes-testing';
 import { queryClient } from '../../../../../../test/jest/utils/queryClient';
 import { ValuesColumn } from './ValuesColumn';
 import { useLoanTypes, usePatronGroup } from '../../../../../hooks/api';
@@ -168,4 +169,12 @@ describe('ValuesColumn Component', () => {
 
     await waitFor(() => expect(onChange).toHaveBeenCalled());
   });
+
+  it('should render with no axe errors', async () => {
+    renderComponent(() => CONTROL_TYPES.ELECTRONIC_ACCESS_RELATIONSHIP_SELECT);
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
 });

src/components/BulkEditList/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditInAppPreviewModal.test.js

@@ -6,6 +6,7 @@ import { act, render, screen, fireEvent } from '@testing-library/react';
 import { useOkapiKy } from '@folio/stripes/core';
 
 import '../../../../../test/jest/__mock__';
+import { runAxeTest } from '@folio/stripes-testing';
 import { bulkEditLogsData } from '../../../../../test/jest/__mock__/fakeData';
 import { queryClient } from '../../../../../test/jest/utils/queryClient';
 import { RootContext } from '../../../../context/RootContext';
@@ -125,5 +126,9 @@ describe('BulkEditInAppPreviewModal', () => {
     });
 
     expect(screen.getByText('ui-bulk-edit.previewModal.previewToBeChanged')).toBeVisible();
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
   });
 });

src/components/BulkEditList/BulkEditListResult/BulkEditListResult.test.js

@@ -61,6 +61,18 @@ describe('BulkEditListResult', () => {
     expect(screen.getByText(/list.result.emptyMessage/)).toBeVisible();
   });
 
+  it('should render with no axe errors', async () => {
+    const history = createMemoryHistory();
+
+    history.push('/bulk-edit?capabilities=USERS&criteria=identifier');
+
+    renderBulkEditResult(history);
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
   it('displays empty message with query tab', () => {
     const history = createMemoryHistory();
 

src/components/BulkEditList/BulkEditListResult/BulkEditManualUploadModal/BulkEditManualUploadModal.test.js

@@ -6,6 +6,7 @@ import { QueryClientProvider } from 'react-query';
 import '../../../../../test/jest/__mock__';
 
 import { BrowserRouter } from 'react-router-dom';
+import { runAxeTest } from '@folio/stripes-testing';
 import { BulkEditManualUploadModal } from './index';
 import { mockData, createDtWithFiles, createFile, flushPromises, dispatchEvt } from '../../../../../test/jest/utils/fileUpload';
 import { queryClient } from '../../../../../test/jest/utils/queryClient';
@@ -57,6 +58,14 @@ describe('BulkEditActionMenu', () => {
     expect(screen.getByText(/meta.title/)).toBeVisible();
   });
 
+  it('should render with no axe errors', async () => {
+    renderWithRouter(startModal, { route: currentRoute });
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
   it('should update title with uploaded name', async () => {
     const fileData = [createFile('SearchHoldings.csv', 1111, 'application/csv')];
 

src/components/BulkEditList/BulkEditListResult/Preview/ElectronicAccessTable/ElectronicAccessTable.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { runAxeTest } from '@folio/stripes-testing';
 import { ElectronicAccessTable } from './ElectronicAccessTable';
 
 
@@ -29,4 +30,12 @@ describe('ElectronicAccessTable', () => {
       });
     });
   });
+
+  it('should render with no axe errors', async () => {
+    render(<ElectronicAccessTable value={testValue} />);
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
 });

src/components/BulkEditList/BulkEditListResult/Preview/ErrorsAccordion/ErrorsAccordion.test.js

@@ -3,6 +3,7 @@ import { MemoryRouter } from 'react-router';
 
 import '../../../../../../test/jest/__mock__';
 import userEvent from '@testing-library/user-event';
+import { runAxeTest } from '@folio/stripes-testing';
 import { errorsPreview } from '../../../../../../test/jest/__mock__/fakeData';
 
 import ErrorsAccordion from './ErrorsAccordion';
@@ -33,6 +34,16 @@ describe('ErrorsAccordion', () => {
     expect(screen.getByText(errorsPreview.errors[0].message)).toBeVisible();
   });
 
+  it('should render with no axe errors', async () => {
+    const mockHistory = ['/bulk-edit/1/preview'];
+
+    renderPreviewAccordion(mockHistory, { ...defaultProps, initial: true });
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
   it('should render preview accordion', () => {
     const mockHistory = ['/bulk-edit/1/preview'];
 

src/components/PermissionsModal/PermissionsModal.test.js

@@ -10,6 +10,7 @@ import {
 import '@testing-library/jest-dom/extend-expect';
 import { QueryClientProvider } from 'react-query';
 import userEvent from '@testing-library/user-event';
+
 import { PermissionsModal } from './PermissionsModal';
 import { queryClient } from '../../../test/jest/utils/queryClient';
 import { useAllPermissions } from './hooks/useAllPermissions';