Skip to content

Commit 01aaa98

Browse files
SodikSodik
committed
*refactor migrate test from enzyme to testng-library
1 parent c8ba067 commit 01aaa98

File tree

98 files changed

+3920
-4084
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+3920
-4084
lines changed

‎packages/ui/__stories__/Tabs.stories.tsx

+28-9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { TabContextProvider, TabContextProviderControlled } from '../src/Tabs/Ta
66
import { TabList } from '../src/Tabs/TabList'
77
import { AnchorTabProps, ButtonTabProps, Tab } from '../src/Tabs/Tab'
88
import { TabPanel } from '../src/Tabs/TabPanel'
9+
import { Icon } from '../src/Icon'
910

1011
type Args = {
1112
fullWidth: boolean
@@ -38,9 +39,15 @@ const Template: Story<Args> = (args) => {
3839
return (
3940
<TabContextProvider fullWidth={args.fullWidth}>
4041
<TabList ariaLabel="Tabs Story">
41-
<Tab label="Tab 1" value={0} {...tabProps} />
42-
<Tab label="Tab 2" value={1} {...tabProps} />
43-
<Tab label="Tab 3" value={2} {...tabProps} />
42+
<Tab ariaLabel="Tab 1" value={0} {...tabProps}>
43+
Tab 1
44+
</Tab>
45+
<Tab ariaLabel="Tab 2" value={1} {...tabProps}>
46+
Tab 2
47+
</Tab>
48+
<Tab ariaLabel="Tab 3" value={2} {...tabProps}>
49+
Tab 3
50+
</Tab>
4451
</TabList>
4552
<TabPanel value={0}>
4653
<p>Panel 1</p>
@@ -79,9 +86,15 @@ export const Controlled = () => {
7986
<p>Active Tab: {value + 1}</p>
8087
<TabContextProviderControlled value={value} onChange={setValue}>
8188
<TabList ariaLabel="Tabs Story">
82-
<Tab label="Tab 1" value={0} />
83-
<Tab label="Tab 2" value={1} />
84-
<Tab label="Tab 3" value={2} />
89+
<Tab ariaLabel="Tab 1" value={0}>
90+
Tab 1
91+
</Tab>
92+
<Tab ariaLabel="Tab 2" value={1}>
93+
Tab 2
94+
</Tab>
95+
<Tab ariaLabel="Tab 3" value={2}>
96+
Tab 3
97+
</Tab>
8598
</TabList>
8699
<TabPanel value={0}>
87100
<p>Panel 1</p>
@@ -100,9 +113,15 @@ export const Controlled = () => {
100113
export const WithIcons = () => (
101114
<TabContextProvider>
102115
<TabList ariaLabel="Tabs Story">
103-
<Tab label="Tab 1" value={0} icon={Info} iconAriaLabel="Info" />
104-
<Tab label="Tab 2" value={1} icon={PenTool} iconAriaLabel="PenTool" />
105-
<Tab label="Tab 3" value={2} icon={Settings} iconAriaLabel="Settings" />
116+
<Tab ariaLabel="Tab 1" value={0}>
117+
<Icon icon={Info} ariaLabel="Info" />
118+
</Tab>
119+
<Tab ariaLabel="Tab 2" value={1}>
120+
<Icon icon={PenTool} ariaLabel="PenTool" />
121+
</Tab>
122+
<Tab ariaLabel="Tab 3" value={2}>
123+
<Icon icon={Settings} ariaLabel="Settings" />
124+
</Tab>
106125
</TabList>
107126
<TabPanel value={0}>
108127
<p>Panel 1</p>

‎packages/ui/__tests__/Alert.test.tsx

+46-103
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { act } from 'react-dom/test-utils'
21
import React from 'react'
2+
import { fireEvent, screen, within } from '@testing-library/react'
3+
import { renderAndCheckA11Y } from '@hazelcast/test-helpers'
34

4-
import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
5-
6-
import { AlertCircle, AlertTriangle, CheckCircle, Clipboard, Info } from 'react-feather'
7-
import { ToastIconDescriptor, ToastType } from '../src/Toast'
5+
import { Clipboard } from 'react-feather'
6+
import { ToastType } from '../src/Toast'
87
import { Alert, AlertActionButton, AlertActionLink } from '../src/Alert'
98

109
import styles from '../src/Alert.module.scss'
10+
import userEvent from '@testing-library/user-event'
1111

1212
const title = 'Alert Title'
1313
const content = 'Alert Content'
@@ -24,98 +24,54 @@ const AlertAction2: AlertActionLink = {
2424
text: 'Link',
2525
href: '#',
2626
target: '_blank',
27-
rel: ['nofollow'],
27+
rel: 'nofollow',
2828
}
2929

3030
describe('Alert', () => {
31-
const alertBasicTestData: [ToastType, ToastIconDescriptor, string][] = [
32-
[
33-
'success',
34-
{
35-
icon: CheckCircle,
36-
ariaLabel: 'Check circle icon',
37-
},
38-
styles.success,
39-
],
40-
[
41-
'info',
42-
{
43-
icon: Info,
44-
ariaLabel: 'Info circle icon',
45-
},
46-
styles.info,
47-
],
48-
[
49-
'warning',
50-
{
51-
icon: AlertTriangle,
52-
ariaLabel: 'Warning triangle icon',
53-
},
54-
styles.warning,
55-
],
56-
[
57-
'critical',
58-
{
59-
icon: AlertCircle,
60-
ariaLabel: 'Info critical circle icon',
61-
},
62-
styles.critical,
63-
],
31+
const alertBasicTestData: [ToastType, string, string][] = [
32+
['success', 'Check circle icon', styles.success],
33+
['info', 'Info circle icon', styles.info],
34+
['warning', 'Warning triangle icon', styles.warning],
35+
['critical', 'Info critical circle icon', styles.critical],
6436
]
6537

66-
it.each(alertBasicTestData)(
67-
'Renders %s Alert with correct className, icon, title and content',
68-
async (type, { icon, ariaLabel }, className) => {
69-
const wrapper = await mountAndCheckA11Y(<Alert type={type} title={title} content={content} closeToast={noOp} />)
70-
71-
const AlertElement = wrapper.find(Alert)
72-
73-
expect(AlertElement.findDataTest('alert').prop('className')).toBe(`alert ${className}`)
74-
expect(AlertElement.findDataTest('alert-title').text()).toBe(title)
75-
expect(AlertElement.findDataTest('alert-content').props()).toMatchObject({
76-
children: content,
77-
})
78-
expect(wrapper.findDataTestFirst('alert-icon').props()).toMatchObject({
79-
icon,
80-
ariaLabel,
81-
})
82-
expect(wrapper.findDataTest('alert-close').exists()).toBeTruthy()
83-
expect(wrapper.findDataTest('alert-actions').exists()).toBeFalsy()
84-
},
85-
)
38+
it.each(alertBasicTestData)('Renders %s Alert with correct className, icon, title and content', async (type, ariaLabel, className) => {
39+
await renderAndCheckA11Y(<Alert type={type} title={title} content={content} closeToast={noOp} />)
40+
41+
expect(screen.getByTestId('alert')).toHaveClass(`alert ${className}`)
42+
expect(screen.getByTestId('alert-title')).toHaveTextContent(title)
43+
expect(screen.queryByText(content)).toBeInTheDocument()
44+
expect(within(screen.getByTestId('alert-icon')).queryByLabelText(ariaLabel)).toBeInTheDocument()
45+
expect(screen.queryByTestId('alert-close')).toBeInTheDocument()
46+
expect(screen.queryByTestId('alert-actions')).not.toBeInTheDocument()
47+
})
8648

8749
it('Correct props are passed to an underlying Link Action component', async () => {
88-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} actions={[AlertAction2]} />)
50+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} actions={[AlertAction2]} />)
8951

90-
expect(wrapper.findDataTest('alert-actions').children().props()).toMatchObject({
91-
href: AlertAction2.href,
92-
target: AlertAction2.target,
93-
rel: AlertAction2.rel,
94-
})
52+
const link = screen.getByTestId('alert-actions').querySelector('a')
53+
expect(link).toBeInTheDocument()
54+
expect(link).toHaveAttribute('href', AlertAction2.href)
55+
expect(link).toHaveAttribute('rel', AlertAction2.rel)
56+
expect(link).toHaveAttribute('target', AlertAction2.target)
9557
})
9658

9759
it('Correct props are passed to an underlying Button Action component', async () => {
98-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} actions={[AlertAction1]} />)
60+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} actions={[AlertAction1]} />)
9961

100-
expect(wrapper.findDataTest('alert-actions').children().props()).toMatchObject({
101-
children: AlertAction1.text,
102-
onClick: AlertAction1.onClick,
103-
iconLeft: AlertAction1.icon,
104-
iconLeftAriaLabel: AlertAction1.ariaLabel,
105-
})
62+
const actions = screen.getByTestId('alert-actions')
63+
expect(within(actions).queryByText(AlertAction1.text)).toBeInTheDocument()
64+
expect(within(actions).queryByLabelText(AlertAction1.ariaLabel)).toBeInTheDocument()
10665
})
10766

10867
it('Close button calls closeToast prop handler', async () => {
10968
const closeToast = jest.fn()
11069

111-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={closeToast} />)
70+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={closeToast} />)
11271

11372
expect(closeToast).toHaveBeenCalledTimes(0)
11473

115-
act(() => {
116-
wrapper.findDataTest('alert-close').at(1).simulate('click')
117-
})
118-
wrapper.update()
74+
await userEvent.click(screen.getByTestId('alert-close'))
11975

12076
expect(closeToast).toHaveBeenCalledTimes(1)
12177
})
@@ -126,52 +82,39 @@ describe('Alert', () => {
12682
]
12783

12884
it.each(alertActionsTestData)('Renders correct text properties for Alert with %s', async (_, actions) => {
129-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={noOp} actions={actions} />)
130-
131-
wrapper
132-
.findDataTest('alert-actions')
133-
.children()
134-
.forEach((child, cI) => {
135-
expect(child.props()).toHaveProperty('children', actions[cI].text)
136-
})
85+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={noOp} actions={actions} />)
86+
87+
actions.forEach((action) => {
88+
expect(screen.queryByText(action.text)).toBeInTheDocument()
89+
})
13790
})
13891

13992
it('Renders only text content with an empty array passed as "actions" property', async () => {
140-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={noOp} actions={[]} />)
141-
const textContent = wrapper.findDataTest('alert-body').text()
142-
expect(textContent).toBe(content)
93+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={noOp} actions={[]} />)
94+
95+
expect(screen.getByTestId('alert-body')).toHaveTextContent(content)
14396
})
14497

14598
it('Alert.closeToast called after simulating Escape key', async () => {
14699
const closeToast = jest.fn()
147100

148-
const wrapper = await mountAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={closeToast} />)
101+
await renderAndCheckA11Y(<Alert type="success" title={title} content={content} closeToast={closeToast} />)
149102

150103
expect(closeToast).toHaveBeenCalledTimes(0)
151104

152-
act(() => {
153-
const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
154-
document.dispatchEvent(event)
155-
})
156-
wrapper.update()
105+
fireEvent.keyDown(document.body, { key: 'Escape', charCode: 13 })
157106

158107
expect(closeToast).toHaveBeenCalledTimes(1)
159108
})
160109

161-
it('Alert.dismissableByEscKey = false means no Esc key handling', async () => {
110+
it('Alert.dismissibleByEscKey = false means no Esc key handling', async () => {
162111
const closeToast = jest.fn()
163112

164-
const wrapper = await mountAndCheckA11Y(
165-
<Alert type="success" dismissableByEscKey={false} title={title} content={content} closeToast={closeToast} />,
166-
)
113+
await renderAndCheckA11Y(<Alert type="success" dismissableByEscKey={false} title={title} content={content} closeToast={closeToast} />)
167114

168115
expect(closeToast).toHaveBeenCalledTimes(0)
169116

170-
act(() => {
171-
const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
172-
document.dispatchEvent(event)
173-
})
174-
wrapper.update()
117+
fireEvent.keyDown(document.body, { key: 'Escape', charCode: 13 })
175118

176119
expect(closeToast).toHaveBeenCalledTimes(0)
177120
})

0 commit comments

Comments
 (0)