Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test(role-helpers): improve coverage of logRoles fn #1248

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

test(role-helpers): improve coverage of logRoles fn #1248

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
49df5e3
initial commit
naorpeled Aug 5, 2023
23ac40b
add tests
naorpeled Aug 5, 2023
8f96e7f
prettier
naorpeled Aug 5, 2023
83cc701
cleanup
naorpeled Aug 5, 2023
bbb0959
CR
naorpeled Aug 6, 2023
82436fa
revert(role-helpers.d.ts): rollback changes - CR
naorpeled Aug 12, 2023
5549cb9
revert(role-helpers.d.ts): rollback changes - CR
naorpeled Aug 12, 2023
95e4b7c
Update src/__tests__/role-helpers.js
naorpeled Aug 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 247 additions & 0 deletions src/__tests__/__snapshots__/role-helpers.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,3 +218,250 @@ Name "":

--------------------------------------------------
`;

exports[`logRoles with hidden=true outputs all elements incl. hidden ones 1`] = `
region:

Name "a region":
<section
aria-label="a region"
data-testid="named-section"
/>

Name "":
<div
aria-hidden="true"
data-testid="a-hidden-div-without-a-generic-role"
role="region"
/>

Name "":
<div
data-testid="a-hidden-div-without-a-generic-role-and-with-hidden-attribute"
hidden=""
role="region"
/>

Name "":
<div
data-testid="a-hidden-div-without-a-generic-role-and-with-display-none"
role="region"
style="display: none"
/>

Name "":
<div
data-testid="a-hidden-div-without-a-generic-role-and-with-visibility-hidden"
role="region"
style="visibility: hidden"
/>

--------------------------------------------------
link:

Name "link":
<a
data-testid="a-link"
href="http://whatever.com"
/>

--------------------------------------------------
navigation:

Name "":
<nav
data-testid="a-nav"
/>

--------------------------------------------------
heading:

Name "Main Heading":
<h1
data-testid="a-h1"
/>

Name "Sub Heading":
<h2
data-testid="a-h2"
/>

Name "Tertiary Heading":
<h3
data-testid="a-h3"
/>

--------------------------------------------------
article:

Name "":
<article
data-testid="a-article"
/>

--------------------------------------------------
command:

Name "":
<menuitem
data-testid="a-menuitem-1"
/>

Name "":
<menuitem
data-testid="a-menuitem-2"
/>

--------------------------------------------------
menuitem:

Name "":
<menuitem
data-testid="a-menuitem-1"
/>

Name "":
<menuitem
data-testid="a-menuitem-2"
/>

--------------------------------------------------
list:

Name "":
<ul
data-testid="a-list"
/>

Name "":
<ul
data-testid="b-list"
/>

--------------------------------------------------
listitem:

Name "":
<li
data-testid="a-list-item-1"
/>

Name "":
<li
data-testid="a-list-item-2"
/>

Name "":
<li
data-testid="b-list-item-1"
/>

Name "":
<li
data-testid="b-list-item-2"
/>

--------------------------------------------------
table:

Name "":
<table
data-testid="a-table"
/>

--------------------------------------------------
rowgroup:

Name "":
<tbody
data-testid="a-tbody"
/>

--------------------------------------------------
row:

Name "Cell 1 Cell 2 Cell 3":
<tr
data-testid="a-row"
/>

--------------------------------------------------
cell:

Name "Cell 1":
<td
data-testid="a-cell-1"
/>

Name "Cell 2":
<td
data-testid="a-cell-2"
/>

Name "Cell 3":
<td
data-testid="a-cell-3"
/>

--------------------------------------------------
form:

Name "a form":
<form
aria-label="a form"
data-testid="named-form"
/>

--------------------------------------------------
radio:

Name "":
<input
data-testid="a-radio-1"
type="radio"
/>

Name "":
<input
data-testid="a-radio-2"
type="radio"
/>

--------------------------------------------------
textbox:

Name "":
<input
data-testid="a-input-1"
type="text"
/>

Name "":
<input
data-testid="a-input-2"
type="text"
/>

Name "":
<textarea
data-testid="a-textarea"
/>

--------------------------------------------------
term:

Name "":
<dt
data-testid="a-dt"
/>

--------------------------------------------------
definition:

Name "":
<dd
data-testid="a-dd"
/>

--------------------------------------------------
`;
48 changes: 48 additions & 0 deletions src/__tests__/role-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
logRoles,
getImplicitAriaRoles,
isInaccessible,
prettyRoles,
} from '../role-helpers'
import {render} from './helpers/test-utils'

Expand All @@ -23,6 +24,27 @@ function setup() {

<nav data-testid='a-nav' />

<!-- div without an explicit role is given a "generic" role by default -->
naorpeled marked this conversation as resolved.
Show resolved Hide resolved
<div aria-hidden="true" data-testid="a-hidden-div-with-a-generic-role">
<span>Some hidden content</span>
</div>

<div aria-hidden="true" data-testid="a-hidden-div-without-a-generic-role" role="region">
naorpeled marked this conversation as resolved.
Show resolved Hide resolved
<span>Some hidden content</span>
</div>

<div data-testid="a-hidden-div-without-a-generic-role-and-with-hidden-attribute" role="region" hidden>
<span>Some hidden content</span>
</div>

<div data-testid="a-hidden-div-without-a-generic-role-and-with-display-none" role="region" style="display: none">
<span>Some hidden content</span>
</div>

<div data-testid="a-hidden-div-without-a-generic-role-and-with-visibility-hidden" role="region" style="visibility: hidden">
<span>Some hidden content</span>
</div>

<h1 data-testid='a-h1'>Main Heading</h1>
<h2 data-testid='a-h2'>Sub Heading</h2>
<h3 data-testid='a-h3'>Tertiary Heading</h3>
Expand Down Expand Up @@ -107,6 +129,19 @@ function setup() {
dt: getByTestId('a-dt'),
dd: getByTestId('a-dd'),
header: getByTestId('a-header'),
hiddenDivWithGenericRole: getByTestId('a-hidden-div-with-a-generic-role'),
hiddenDivWithoutGenericRole: getByTestId(
'a-hidden-div-without-a-generic-role',
),
hiddenDivWithoutGenericRoleAndWithHiddenAttribute: getByTestId(
'a-hidden-div-without-a-generic-role-and-with-hidden-attribute',
),
hiddenDivWithoutGenericRoleAndWithDisplayNone: getByTestId(
'a-hidden-div-without-a-generic-role-and-with-display-none',
),
hiddenDivWithoutGenericRoleAndWithVisibilityHidden: getByTestId(
'a-hidden-div-without-a-generic-role-and-with-visibility-hidden',
),
}
}

Expand Down Expand Up @@ -169,13 +204,26 @@ test('getRoles returns expected roles for various dom nodes', () => {
})
})

test('prettyRoles ignores elements with a "generic" role', () => {
const {hiddenDivWithGenericRole} = setup()
expect(prettyRoles(hiddenDivWithGenericRole)).toEqual('')
})

test('logRoles calls console.log with output from prettyRoles', () => {
const {namedSection} = setup()
logRoles(namedSection)
expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchSnapshot()
})

test('logRoles with hidden=true outputs all elements incl. hidden ones', () => {
const {namedSection} = setup()
logRoles(namedSection, {hidden: true})

expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchSnapshot()
})

test('getImplicitAriaRoles returns expected roles for various dom nodes', () => {
const {namedSection, h1, unnamedForm, radio, input} = setup()

Expand Down
2 changes: 1 addition & 1 deletion src/role-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ function getRoles(container, {hidden = false} = {}) {
}, {})
}

function prettyRoles(dom, {hidden, includeDescription}) {
function prettyRoles(dom, {hidden, includeDescription} = {}) {
naorpeled marked this conversation as resolved.
Show resolved Hide resolved
const roles = getRoles(dom, {hidden})
// We prefer to skip generic role, we don't recommend it
return Object.entries(roles)
Expand Down
12 changes: 11 additions & 1 deletion types/role-helpers.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
export function logRoles(container: HTMLElement): string
export function logRoles(
container: HTMLElement,
options?: LogRolesOptions,
): string

type LogRolesOptions = {
hidden?: boolean
naorpeled marked this conversation as resolved.
Show resolved Hide resolved
}

export function getRoles(container: HTMLElement): {
[index: string]: HTMLElement[]
}

/**
* https://testing-library.com/docs/dom-testing-library/api-helpers#isinaccessible
*/
export function isInaccessible(element: Element): boolean

export function computeHeadingLevel(element: Element): number | undefined
Loading