Skip to content

Commit 78c1fc6

Browse files
joshblackjoshblack
committed
Handle expected console output in tests
1 parent cd99468 commit 78c1fc6

7 files changed

Lines changed: 192 additions & 142 deletions

File tree

‎packages/react/src/ActionList/Group.test.tsx‎

Lines changed: 75 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import BaseStyles from '../BaseStyles'
55
import {ActionList} from '.'
66
import {ActionMenu} from '..'
77
import {FeatureFlags} from '../FeatureFlags'
8-
import {implementsClassName} from '../utils/testing'
8+
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
99
import classes from './Group.module.css'
1010

1111
describe('ActionList.Group', () => {
@@ -22,24 +22,26 @@ describe('ActionList.Group', () => {
2222
implementsClassName(ActionList.GroupHeading, classes.GroupHeading)
2323

2424
it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => {
25-
expect(() =>
26-
HTMLRender(
27-
<BaseStyles>
28-
<ActionMenu open={true}>
29-
<ActionMenu.Button>Trigger</ActionMenu.Button>
30-
<ActionMenu.Overlay>
31-
<ActionList>
32-
<ActionList.Group>
33-
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
34-
</ActionList.Group>
35-
</ActionList>
36-
</ActionMenu.Overlay>
37-
</ActionMenu>
38-
</BaseStyles>,
39-
),
40-
).toThrow(
41-
"Looks like you are trying to set a heading level to a menu role. Group headings for menu type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.",
42-
)
25+
withExpectedConsoleError(() => {
26+
expect(() =>
27+
HTMLRender(
28+
<BaseStyles>
29+
<ActionMenu open={true}>
30+
<ActionMenu.Button>Trigger</ActionMenu.Button>
31+
<ActionMenu.Overlay>
32+
<ActionList>
33+
<ActionList.Group>
34+
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
35+
</ActionList.Group>
36+
</ActionList>
37+
</ActionMenu.Overlay>
38+
</ActionMenu>
39+
</BaseStyles>,
40+
),
41+
).toThrow(
42+
"Looks like you are trying to set a heading level to a menu role. Group headings for menu type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.",
43+
)
44+
})
4345
})
4446

4547
it('should render the ActionList.GroupHeading component as a heading with the given heading level', async () => {
@@ -56,19 +58,21 @@ describe('ActionList.Group', () => {
5658
expect(heading).toHaveTextContent('Group Heading')
5759
})
5860
it('should throw an error if ActionList.GroupHeading is used without an `as` prop when no role is specified (for list role)', async () => {
59-
expect(() =>
60-
HTMLRender(
61-
<ActionList>
62-
<ActionList.Heading as="h1">Heading</ActionList.Heading>
63-
<ActionList.Group>
64-
<ActionList.GroupHeading>Group Heading</ActionList.GroupHeading>
65-
<ActionList.Item>Item</ActionList.Item>
66-
</ActionList.Group>
67-
</ActionList>,
68-
),
69-
).toThrow(
70-
"You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.",
71-
)
61+
withExpectedConsoleError(() => {
62+
expect(() =>
63+
HTMLRender(
64+
<ActionList>
65+
<ActionList.Heading as="h1">Heading</ActionList.Heading>
66+
<ActionList.Group>
67+
<ActionList.GroupHeading>Group Heading</ActionList.GroupHeading>
68+
<ActionList.Item>Item</ActionList.Item>
69+
</ActionList.Group>
70+
</ActionList>,
71+
),
72+
).toThrow(
73+
"You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.",
74+
)
75+
})
7276
})
7377
it('should render the ActionList.GroupHeading component as a span (not a heading tag) when role is specified as listbox', async () => {
7478
const container = HTMLRender(
@@ -191,44 +195,48 @@ describe('ActionList.Group', () => {
191195
})
192196

193197
it('throws when GroupHeading.TrailingAction is used inside an ActionMenu (menu role) and the feature flag is enabled', () => {
194-
expect(() =>
195-
HTMLRender(
196-
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
197-
<BaseStyles>
198-
<ActionMenu open={true}>
199-
<ActionMenu.Button>Trigger</ActionMenu.Button>
200-
<ActionMenu.Overlay>
201-
<ActionList>
202-
<ActionList.Group>
203-
<ActionList.GroupHeading>
204-
Group Heading
205-
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
206-
</ActionList.GroupHeading>
207-
</ActionList.Group>
208-
</ActionList>
209-
</ActionMenu.Overlay>
210-
</ActionMenu>
211-
</BaseStyles>
212-
</FeatureFlags>,
213-
),
214-
).toThrow(/can not be used inside an ActionList with an ARIA role of "menu"/)
198+
withExpectedConsoleError(() => {
199+
expect(() =>
200+
HTMLRender(
201+
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
202+
<BaseStyles>
203+
<ActionMenu open={true}>
204+
<ActionMenu.Button>Trigger</ActionMenu.Button>
205+
<ActionMenu.Overlay>
206+
<ActionList>
207+
<ActionList.Group>
208+
<ActionList.GroupHeading>
209+
Group Heading
210+
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
211+
</ActionList.GroupHeading>
212+
</ActionList.Group>
213+
</ActionList>
214+
</ActionMenu.Overlay>
215+
</ActionMenu>
216+
</BaseStyles>
217+
</FeatureFlags>,
218+
),
219+
).toThrow(/can not be used inside an ActionList with an ARIA role of "menu"/)
220+
})
215221
})
216222

217223
it('throws when GroupHeading.TrailingAction is used inside a listbox role and the feature flag is enabled', () => {
218-
expect(() =>
219-
HTMLRender(
220-
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
221-
<ActionList role="listbox">
222-
<ActionList.Group>
223-
<ActionList.GroupHeading>
224-
Group Heading
225-
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
226-
</ActionList.GroupHeading>
227-
</ActionList.Group>
228-
</ActionList>
229-
</FeatureFlags>,
230-
),
231-
).toThrow(/can not be used inside an ActionList with an ARIA role of "listbox"/)
224+
withExpectedConsoleError(() => {
225+
expect(() =>
226+
HTMLRender(
227+
<FeatureFlags flags={{primer_react_action_list_group_heading_trailing_action: true}}>
228+
<ActionList role="listbox">
229+
<ActionList.Group>
230+
<ActionList.GroupHeading>
231+
Group Heading
232+
<ActionList.GroupHeading.TrailingAction label="New field" icon={PlusIcon} />
233+
</ActionList.GroupHeading>
234+
</ActionList.Group>
235+
</ActionList>
236+
</FeatureFlags>,
237+
),
238+
).toThrow(/can not be used inside an ActionList with an ARIA role of "listbox"/)
239+
})
232240
})
233241
})
234242
})

‎packages/react/src/ActionList/Heading.test.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {render as HTMLRender} from '@testing-library/react'
33
import BaseStyles from '../BaseStyles'
44
import {ActionList} from '.'
55
import {ActionMenu} from '..'
6-
import {implementsClassName} from '../utils/testing'
6+
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
77
import classes from './Heading.module.css'
88

99
describe('ActionList.Heading', () => {
@@ -42,22 +42,24 @@ describe('ActionList.Heading', () => {
4242
})
4343

4444
it('should throw an error when ActionList.Heading is used within ActionMenu context', async () => {
45-
expect(() =>
46-
HTMLRender(
47-
<BaseStyles>
48-
<ActionMenu open={true}>
49-
<ActionMenu.Button>Trigger</ActionMenu.Button>
50-
<ActionMenu.Overlay>
51-
<ActionList>
52-
<ActionList.Heading as="h1">Heading</ActionList.Heading>
53-
<ActionList.Item>Item</ActionList.Item>
54-
</ActionList>
55-
</ActionMenu.Overlay>
56-
</ActionMenu>
57-
</BaseStyles>,
58-
),
59-
).toThrow(
60-
"ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
61-
)
45+
withExpectedConsoleError(() => {
46+
expect(() =>
47+
HTMLRender(
48+
<BaseStyles>
49+
<ActionMenu open={true}>
50+
<ActionMenu.Button>Trigger</ActionMenu.Button>
51+
<ActionMenu.Overlay>
52+
<ActionList>
53+
<ActionList.Heading as="h1">Heading</ActionList.Heading>
54+
<ActionList.Item>Item</ActionList.Item>
55+
</ActionList>
56+
</ActionMenu.Overlay>
57+
</ActionMenu>
58+
</BaseStyles>,
59+
),
60+
).toThrow(
61+
"ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.",
62+
)
63+
})
6264
})
6365
})

‎packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {XIcon} from '@primer/octicons-react'
99
import classes from '../Tooltip.module.css'
1010

1111
import type {JSX} from 'react'
12-
import {implementsClassName} from '../../utils/testing'
12+
import {implementsClassName, withExpectedConsoleError} from '../../utils/testing'
1313

1414
const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
1515
<Tooltip text="Tooltip text" {...props}>
@@ -125,15 +125,17 @@ describe('Tooltip', () => {
125125
expect(triggerEL.getAttribute('aria-describedby')).toContain('custom-tooltip-id')
126126
})
127127
it('should throw an error if the trigger element is disabled', () => {
128-
expect(() => {
129-
HTMLRender(
130-
<Tooltip text="Tooltip text" direction="n">
131-
<Button disabled>Delete</Button>
132-
</Tooltip>,
128+
withExpectedConsoleError(() => {
129+
expect(() => {
130+
HTMLRender(
131+
<Tooltip text="Tooltip text" direction="n">
132+
<Button disabled>Delete</Button>
133+
</Tooltip>,
134+
)
135+
}).toThrow(
136+
'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
133137
)
134-
}).toThrow(
135-
'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
136-
)
138+
})
137139
})
138140
it('should not throw an error when the trigger element is a button in a fieldset', () => {
139141
const {getByRole} = HTMLRender(

‎packages/react/src/UnderlineNav/UnderlineNav.test.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@primer/octicons-react'
1414

1515
import {UnderlineNav} from '.'
16-
import {implementsClassName} from '../utils/testing'
16+
import {implementsClassName, withExpectedConsoleError} from '../utils/testing'
1717
import classes from '../internal/components/UnderlineTabbedInterface.module.css'
1818
import {clsx} from 'clsx'
1919

@@ -158,14 +158,16 @@ describe('UnderlineNav', () => {
158158
})
159159

160160
it('throws an error when there are multiple items that have aria-current', () => {
161-
expect(() => {
162-
render(
163-
<UnderlineNav aria-label="Test Navigation">
164-
<UnderlineNav.Item aria-current="page">Item 1</UnderlineNav.Item>
165-
<UnderlineNav.Item aria-current="page">Item 2</UnderlineNav.Item>
166-
</UnderlineNav>,
167-
)
168-
}).toThrow('Only one current element is allowed')
161+
withExpectedConsoleError(() => {
162+
expect(() => {
163+
render(
164+
<UnderlineNav aria-label="Test Navigation">
165+
<UnderlineNav.Item aria-current="page">Item 1</UnderlineNav.Item>
166+
<UnderlineNav.Item aria-current="page">Item 2</UnderlineNav.Item>
167+
</UnderlineNav>,
168+
)
169+
}).toThrow('Only one current element is allowed')
170+
})
169171
})
170172

171173
it('should support icons passed in as an element', () => {
@@ -242,7 +244,12 @@ describe('UnderlineNav', () => {
242244

243245
describe('Keyboard Navigation', () => {
244246
it('should move focus to the next/previous item on the list with the tab key', async () => {
245-
const {getByRole} = render(<ResponsiveUnderlineNav />)
247+
const {getByRole} = render(
248+
<UnderlineNav aria-label="Repository">
249+
<UnderlineNav.Item aria-current="page">Code</UnderlineNav.Item>
250+
<UnderlineNav.Item counter={120}>Issues</UnderlineNav.Item>
251+
</UnderlineNav>,
252+
)
246253
const item = getByRole('link', {name: 'Code'})
247254
const nextItem = getByRole('link', {name: 'Issues (120)'})
248255
const user = userEvent.setup()

0 commit comments

Comments
 (0)