Skip to content

Commit 73bf023

Browse files
rahu1rameshrahu1ramesh
committed
Add. Accessibility Tests
1 parent 8ec4ea2 commit 73bf023

File tree

13 files changed

+149
-45
lines changed

13 files changed

+149
-45
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"@testing-library/react": "^16.2.0",
5959
"@testing-library/user-event": "^14.6.1",
6060
"@types/jest": "^29.5.12",
61+
"@types/jest-axe": "^3.5.9",
6162
"@types/node": "^22.13.10",
6263
"@types/react": "^19.0.11",
6364
"@types/react-dom": "^19.0.4",
@@ -75,6 +76,7 @@
7576
"html-webpack-plugin": "^5.5.3",
7677
"husky": "^9.1.7",
7778
"jest": "^29.7.0",
79+
"jest-axe": "^10.0.0",
7880
"jest-environment-jsdom": "^29.7.0",
7981
"jiti": "^2.4.2",
8082
"lint-staged": "^15.5.0",

‎src/components/clinical/header/__tests__/Header.test.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React from 'react';
22
import { render, screen } from '@testing-library/react';
33
import { BrowserRouter } from 'react-router-dom';
44
import Header from '../Header';
5+
import { axe, toHaveNoViolations } from 'jest-axe';
6+
7+
expect.extend(toHaveNoViolations);
58

69
// Mock FontAwesomeIcon for BahmniIcon
710
jest.mock('@fortawesome/react-fontawesome', () => ({
@@ -81,15 +84,9 @@ describe('Header Component', () => {
8184

8285
// Accessibility Tests
8386
describe('Accessibility', () => {
84-
test('all interactive elements have accessible names', () => {
85-
renderWithRouter();
86-
87-
// Check all buttons and links have accessible names
88-
const links = screen.getAllByRole('link', { hidden: true });
89-
90-
links.forEach((element) => {
91-
expect(element).toHaveAccessibleName();
92-
});
87+
test('accessible forms pass axe', async () => {
88+
const { container } = renderWithRouter();
89+
expect(await axe(container)).toHaveNoViolations();
9390
});
9491
});
9592
});

‎src/components/common/bahmniIcon/__tests__/BahmniIcon.test.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { render, screen } from '@testing-library/react';
33
import BahmniIcon from '../BahmniIcon';
44
import '@testing-library/jest-dom';
55
import { ICON_PADDING, ICON_SIZE } from '@/constants/icon';
6+
import { axe, toHaveNoViolations } from 'jest-axe';
7+
8+
expect.extend(toHaveNoViolations);
69

710
// Mock FontAwesomeIcon and pass props to the rendered element
811
jest.mock('@fortawesome/react-fontawesome', () => ({
@@ -99,4 +102,13 @@ describe('Icon Component', () => {
99102
);
100103
expect(icon.container).toBeEmptyDOMElement();
101104
});
105+
106+
describe('Accessibility', () => {
107+
test('accessible forms pass axe', async () => {
108+
const { container } = render(
109+
<BahmniIcon name="invalid-name-format" id="invalid-icon" />,
110+
);
111+
expect(await axe(container)).toHaveNoViolations();
112+
});
113+
});
102114
});

‎src/components/common/expandableDataTable/__tests__/ExpandableDataTable.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -896,4 +896,6 @@ describe('ExpandableDataTable', () => {
896896
expect(screen.getByText('Item 1')).toBeInTheDocument();
897897
expect(screen.getByText('Item 2')).toBeInTheDocument();
898898
});
899+
900+
//TODO: Add tests for A11y
899901
});

‎src/components/common/notification/__tests__/NotificationContainer.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,4 +276,6 @@ describe('NotificationContainer', () => {
276276
expect(screen.getByText('A'.repeat(100))).toBeInTheDocument();
277277
expect(screen.getByText('B'.repeat(500))).toBeInTheDocument();
278278
});
279+
280+
//TODO: Add tests for A11Y compliance
279281
});

‎src/components/common/sidebar/__tests__/Sidebar.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import { render, screen, fireEvent } from '@testing-library/react';
33
import Sidebar from '../Sidebar';
4+
import { axe, toHaveNoViolations } from 'jest-axe';
45

6+
expect.extend(toHaveNoViolations);
57
// Mock the CSS module
68
jest.mock('../styles/Sidebar.module.scss', () => ({
79
sidebar: 'sidebar-mock',
@@ -141,4 +143,11 @@ describe('Sidebar', () => {
141143
// Check that the action was called
142144
expect(mockAction).toHaveBeenCalledTimes(1);
143145
});
146+
147+
describe('Accessibility', () => {
148+
test('accessible forms pass axe', async () => {
149+
const { container } = render(<Sidebar items={defaultItems} />);
150+
expect(await axe(container)).toHaveNoViolations();
151+
});
152+
});
144153
});

‎src/components/common/sidebar/stories/Sidebar.stories.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,7 @@ import { SidebarItemProps } from '../SidebarItem';
88
initFontAwesome();
99

1010
// Create a decorator to provide proper layout and sizing for the sidebar
11-
const SidebarDecorator = (Story: React.ComponentType) => (
12-
<div
13-
style={{
14-
height: '450px',
15-
width: '240px',
16-
border: '1px solid #e0e0e0',
17-
borderRadius: '4px',
18-
overflow: 'hidden',
19-
}}
20-
>
21-
<Story />
22-
</div>
23-
);
11+
const SidebarDecorator = (Story: React.ComponentType) => <Story />;
2412

2513
const meta: Meta<typeof Sidebar> = {
2614
title: 'Components/Common/Sidebar',

‎src/displayControls/allergies/__tests__/AllergiesTable.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import {
2121
mockAllergyWithMultipleSeverities,
2222
} from '@__mocks__/allergyMocks';
2323
import { FhirAllergyIntolerance, FormattedAllergy } from '@types/allergy';
24+
import { axe, toHaveNoViolations } from 'jest-axe';
25+
26+
expect.extend(toHaveNoViolations);
2427

2528
// Mock the hooks and utilities
2629
jest.mock('@hooks/usePatientUUID');
@@ -1403,4 +1406,11 @@ describe('AllergiesTable Unit Tests', () => {
14031406
expect(screen.getByTestId('mock-expandable-table')).toBeInTheDocument();
14041407
});
14051408
});
1409+
1410+
describe('Accessibility', () => {
1411+
test('accessible forms pass axe', async () => {
1412+
const { container } = render(<AllergiesTable />);
1413+
expect(await axe(container)).toHaveNoViolations();
1414+
});
1415+
});
14061416
});

‎src/displayControls/conditions/__tests__/ConditionsTable.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
mockFormattedConditionsWithoutNotes,
1515
} from '@__mocks__/conditionMocks';
1616
import { ConditionStatus, FormattedCondition } from '@types/condition';
17+
import { axe, toHaveNoViolations } from 'jest-axe';
18+
19+
expect.extend(toHaveNoViolations);
1720

1821
// Mock the hooks and utilities
1922
jest.mock('@hooks/usePatientUUID');
@@ -750,4 +753,10 @@ describe('ConditionsTable Unit Tests', () => {
750753
);
751754
});
752755
});
756+
describe('Accessibility', () => {
757+
test('accessible forms pass axe', async () => {
758+
const { container } = render(<ConditionsTable />);
759+
expect(await axe(container)).toHaveNoViolations();
760+
});
761+
});
753762
});

‎src/displayControls/patient/__tests__/PatientDetails.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { usePatientUUID } from '@hooks/usePatientUUID';
66
import * as patientService from '@services/patientService';
77
import { FormattedPatientData, Age } from '@types/patient';
88
import i18n from '@/setupTests.i18n';
9+
import { axe, toHaveNoViolations } from 'jest-axe';
10+
11+
expect.extend(toHaveNoViolations);
912

1013
// Mock the custom hooks and patient service
1114
jest.mock('@hooks/usePatient');
@@ -692,4 +695,11 @@ describe('PatientDetails Component', () => {
692695
// Assert
693696
expect(screen.getByTestId('skeleton-loader')).toBeInTheDocument();
694697
});
698+
699+
describe('Accessibility', () => {
700+
test('accessible forms pass axe', async () => {
701+
const { container } = render(<PatientDetails />);
702+
expect(await axe(container)).toHaveNoViolations();
703+
});
704+
});
695705
});

0 commit comments

Comments
 (0)