Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
5fb91328
Unverified
Commit
5fb91328
authored
Mar 31, 2021
by
Ridwan Amode
Committed by
GitHub
Mar 31, 2021
Browse files
React testing refactor (#484)
* ENSWBSITES-1045: update test scripts to use react-testing library
parent
9b48d325
Pipeline
#143244
passed with stages
in 7 minutes and 6 seconds
Changes
9
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
209 additions
and
203 deletions
+209
-203
src/ensembl/src/shared/components/badged-button/BadgedButton.test.tsx
...src/shared/components/badged-button/BadgedButton.test.tsx
+26
-44
src/ensembl/src/shared/components/badged-button/BadgedButton.tsx
...embl/src/shared/components/badged-button/BadgedButton.tsx
+1
-1
src/ensembl/src/shared/components/expandable-section/ExpandableSection.test.tsx
.../components/expandable-section/ExpandableSection.test.tsx
+28
-26
src/ensembl/src/shared/components/external-link/ExternalLink.test.tsx
...src/shared/components/external-link/ExternalLink.test.tsx
+12
-16
src/ensembl/src/shared/components/external-link/ExternalLink.tsx
...embl/src/shared/components/external-link/ExternalLink.tsx
+1
-1
src/ensembl/src/shared/components/external-reference/ExternalReference.test.tsx
.../components/external-reference/ExternalReference.test.tsx
+32
-20
src/ensembl/src/shared/components/external-reference/ExternalReference.tsx
...hared/components/external-reference/ExternalReference.tsx
+1
-1
src/ensembl/src/shared/components/image-button/ImageButton.test.tsx
...l/src/shared/components/image-button/ImageButton.test.tsx
+48
-61
src/ensembl/src/shared/components/upload/Upload.test.tsx
src/ensembl/src/shared/components/upload/Upload.test.tsx
+60
-33
No files found.
src/ensembl/src/shared/components/badged-button/BadgedButton.test.tsx
View file @
5fb91328
...
...
@@ -15,9 +15,9 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
BadgedButton
from
'
./BadgedButton
'
;
import
BadgedButton
,
{
Props
as
BadgedButtonProps
}
from
'
./BadgedButton
'
;
import
Button
from
'
../button/Button
'
;
const
onClick
=
jest
.
fn
();
...
...
@@ -26,66 +26,48 @@ const defaultProps = {
badgeContent
:
faker
.
lorem
.
words
()
};
const
renderButton
=
(
ButtonComponent
:
React
.
FunctionComponent
<
any
>
,
props
:
any
=
defaultProps
)
=>
mount
(<
ButtonComponent
{
...
props
}
/>);
const
renderButton
=
(
props
:
Partial
<
BadgedButtonProps
>
=
{})
=>
render
(
<
BadgedButton
{
...
defaultProps
}
{
...
props
}
>
<
Button
onClick
=
{
onClick
}
>
{
faker
.
lorem
.
words
()
}
</
Button
>
</
BadgedButton
>
);
describe
(
'
BadgedButton
'
,
()
=>
{
let
wrapper
:
any
;
beforeEach
(()
=>
{
wrapper
=
renderButton
(
BadgedButton
,
{
...
defaultProps
,
children
:
<
Button
onClick
=
{
onClick
}
>
{
faker
.
lorem
.
words
()
}
</
Button
>
});
});
afterEach
(()
=>
{
jest
.
resetAllMocks
();
});
it
(
'
renders the passed in button
'
,
()
=>
{
expect
(
wrapper
.
find
(
'
button
'
).
length
).
toEqual
(
1
);
const
{
container
}
=
renderButton
();
expect
(
container
.
querySelectorAll
(
'
.button
'
)).
toHaveLength
(
1
);
});
it
(
'
assigns the "badgeDefault" class to the badge by default
'
,
()
=>
{
const
renderedBadge
=
wrapper
.
find
(
'
.badgeDefault
'
);
expect
(
renderedBadge
).
toHaveLength
(
1
);
const
{
container
}
=
renderButton
(
);
expect
(
container
.
querySelectorAll
(
'
.badgeDefault
'
)
).
toHaveLength
(
1
);
});
it
(
'
extends the badge class
'
,
()
=>
{
const
fakeClassName
=
faker
.
lorem
.
word
();
const
wrapper
=
renderButton
(
BadgedButton
,
{
...
defaultProps
,
children
:
<
Button
onClick
=
{
onClick
}
>
{
faker
.
lorem
.
words
()
}
</
Button
>,
className
:
fakeClassName
});
const
renderedBadge
=
wrapper
.
find
(
'
.badgeDefault
'
);
expect
(
renderedBadge
.
hasClass
(
fakeClassName
)).
toBe
(
true
);
const
{
container
}
=
renderButton
({
className
:
fakeClassName
});
expect
(
container
.
querySelector
(
'
.badgeDefault
'
)
?.
classList
.
contains
(
fakeClassName
)
).
toBeTruthy
;
});
it
(
'
trims the longer strings to three characters
'
,
()
=>
{
const
wrapper
=
renderButton
(
BadgedButton
,
{
badgeContent
:
'
abcd
'
,
children
:
<
Button
onClick
=
{
onClick
}
>
{
faker
.
lorem
.
words
()
}
</
Button
>
});
const
renderedBadge
=
wrapper
.
find
(
'
.badgeDefault
'
);
expect
(
renderedBadge
.
text
()).
toBe
(
'
abc
'
);
const
{
container
}
=
renderButton
({
badgeContent
:
'
abcd
'
});
expect
(
container
.
querySelector
(
'
.badgeDefault
'
)?.
textContent
).
toEqual
(
'
abc
'
);
});
it
(
'
formats number greater than 99 to "99+"
'
,
()
=>
{
const
wrapper
=
renderButton
(
BadgedButton
,
{
badgeContent
:
100
,
children
:
<
Button
onClick
=
{
onClick
}
>
{
faker
.
lorem
.
words
()
}
</
Button
>
});
const
renderedBadge
=
wrapper
.
find
(
'
.badgeDefault
'
);
expect
(
renderedBadge
.
text
()).
toBe
(
'
99+
'
);
const
{
container
}
=
renderButton
({
badgeContent
:
100
});
expect
(
container
.
querySelector
(
'
.badgeDefault
'
)?.
textContent
).
toEqual
(
'
99+
'
);
});
});
src/ensembl/src/shared/components/badged-button/BadgedButton.tsx
View file @
5fb91328
...
...
@@ -18,7 +18,7 @@ import React from 'react';
import
defaultStyles
from
'
./BadgedButton.scss
'
;
import
classNames
from
'
classnames
'
;
type
Props
=
{
export
type
Props
=
{
children
:
React
.
ReactChild
;
badgeContent
?:
string
|
number
|
undefined
;
className
?:
string
;
...
...
src/ensembl/src/shared/components/expandable-section/ExpandableSection.test.tsx
View file @
5fb91328
...
...
@@ -15,7 +15,9 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
userEvent
from
'
@testing-library/user-event
'
;
import
faker
from
'
faker
'
;
import
ExpandableSection
,
{
ExpandableSectionProps
}
from
'
./ExpandableSection
'
;
...
...
@@ -39,64 +41,64 @@ const defaultProps: ExpandableSectionProps = {
describe
(
'
<ExpandableSection />
'
,
()
=>
{
const
renderExpandableSection
=
(
props
:
Partial
<
ExpandableSectionProps
>
=
{}
)
=>
mount
(<
ExpandableSection
{
...
defaultProps
}
{
...
props
}
/>);
)
=>
render
(<
ExpandableSection
{
...
defaultProps
}
{
...
props
}
/>);
let
wrapp
er
:
any
;
let
contain
er
:
any
;
beforeEach
(()
=>
{
jest
.
resetAllMocks
();
wrapp
er
=
renderExpandableSection
();
contain
er
=
renderExpandableSection
()
.
container
;
});
it
(
'
renders without error
'
,
()
=>
{
expect
(()
=>
wrapp
er
).
not
.
toThrow
();
expect
(()
=>
contain
er
).
not
.
toThrow
();
});
it
(
'
hides the expanded content when isExpanded is false
'
,
()
=>
{
wrapp
er
=
renderExpandableSection
({
contain
er
=
renderExpandableSection
({
isExpanded
:
false
});
expect
(
wrapper
.
find
(
'
.expandedContent
'
)).
toHaveLength
(
0
);
expect
(
wrapper
.
find
(
'
.collapsedContent
'
)).
toHaveLength
(
1
);
})
.
container
;
expect
(
container
.
querySelectorAll
(
'
.expandedContent
'
)).
toHaveLength
(
0
);
expect
(
container
.
querySelectorAll
(
'
.collapsedContent
'
)).
toHaveLength
(
1
);
});
it
(
'
shows the expanded content when isExpanded is true
'
,
()
=>
{
expect
(
wrapper
.
find
(
'
.expandedContent
'
)).
toHaveLength
(
1
);
expect
(
wrapper
.
find
(
'
.collapsedContent
'
)).
toHaveLength
(
0
);
expect
(
container
.
querySelectorAll
(
'
.expandedContent
'
)).
toHaveLength
(
1
);
expect
(
container
.
querySelectorAll
(
'
.collapsedContent
'
)).
toHaveLength
(
0
);
});
it
(
'
calls onToggle prop when collapsing or expanding
'
,
()
=>
{
wrapper
.
find
(
'
.toggle
'
).
simulate
(
'
click
'
);
userEvent
.
click
(
container
.
querySelector
(
'
.toggle
'
)
);
expect
(
mockOnToggle
).
toBeCalledWith
(
false
);
wrapp
er
=
renderExpandableSection
({
contain
er
=
renderExpandableSection
({
isExpanded
:
false
});
})
.
container
;
wrapper
.
find
(
'
.toggle
'
).
simulate
(
'
click
'
);
userEvent
.
click
(
container
.
querySelector
(
'
.toggle
'
)
);
expect
(
mockOnToggle
).
toBeCalledWith
(
true
);
});
it
(
'
applies the passed in classNames
'
,
()
=>
{
expect
(
wrapp
er
.
find
(
'
.expandableSection
'
)
.
hasClas
s
(
defaultProps
.
classNames
?.
wrapper
)
contain
er
.
querySelector
(
'
.expandableSection
'
)
.
classList
.
contain
s
(
defaultProps
.
classNames
?.
wrapper
)
).
toBeTruthy
();
expect
(
wrapp
er
.
find
(
'
.expandedContent
'
)
.
hasClas
s
(
defaultProps
.
classNames
?.
expanded
)
contain
er
.
querySelector
(
'
.expandedContent
'
)
.
classList
.
contain
s
(
defaultProps
.
classNames
?.
expanded
)
).
toBeTruthy
();
wrapp
er
=
renderExpandableSection
({
contain
er
=
renderExpandableSection
({
isExpanded
:
false
});
})
.
container
;
expect
(
wrapp
er
.
find
(
'
.collapsedContent
'
)
.
hasClas
s
(
defaultProps
.
classNames
?.
collapsed
)
contain
er
.
querySelector
(
'
.collapsedContent
'
)
.
classList
.
contain
s
(
defaultProps
.
classNames
?.
collapsed
)
).
toBeTruthy
();
});
});
src/ensembl/src/shared/components/external-link/ExternalLink.test.tsx
View file @
5fb91328
...
...
@@ -15,7 +15,8 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
ExternalLink
,
{
ExternalLinkProps
}
from
'
./ExternalLink
'
;
...
...
@@ -24,32 +25,27 @@ const defaultProps: ExternalLinkProps = {
linkText
:
faker
.
random
.
words
(),
to
:
faker
.
internet
.
url
(),
classNames
:
{
icon
:
faker
.
random
.
word
s
(),
link
:
faker
.
random
.
word
s
()
icon
:
faker
.
random
.
word
(),
link
:
faker
.
random
.
word
()
}
};
describe
(
'
<ExternalLink />
'
,
()
=>
{
const
renderExternalLink
=
(
props
:
Partial
<
ExternalLinkProps
>
=
{})
=>
mount
(<
ExternalLink
{
...
defaultProps
}
{
...
props
}
/>);
let
wrapper
:
any
;
beforeEach
(()
=>
{
jest
.
resetAllMocks
();
wrapper
=
renderExternalLink
();
});
render
(<
ExternalLink
{
...
defaultProps
}
{
...
props
}
/>);
it
(
'
renders without error
'
,
()
=>
{
expect
(()
=>
wrapper
).
not
.
toThrow
();
const
{
container
}
=
renderExternalLink
();
expect
(()
=>
container
).
not
.
toThrow
();
});
it
(
'
applies the passed in classNames
'
,
()
=>
{
const
{
container
}
=
renderExternalLink
();
expect
(
container
.
getElementsByClassName
(
'
.icon
'
)).
toBeTruthy
();
expect
(
wrapper
.
find
(
'
.icon
'
).
hasClass
(
defaultProps
.
classNames
?.
icon
)
).
toBeTruthy
();
expect
(
wrapper
.
find
(
'
.link
'
).
hasClass
(
defaultProps
.
classNames
?.
link
)
container
.
querySelector
(
'
.link
'
)
?.
classList
.
contains
(
defaultProps
.
classNames
?.
link
as
string
)
).
toBeTruthy
();
});
});
src/ensembl/src/shared/components/external-link/ExternalLink.tsx
View file @
5fb91328
...
...
@@ -36,7 +36,7 @@ const ExternalLink = (props: ExternalLinkProps) => {
const
linkClass
=
classNames
(
styles
.
link
,
props
.
classNames
?.
link
);
return
(
<
span
className
=
{
styles
.
container
}
>
<
span
className
=
{
styles
.
container
}
data
-
test
-
id
=
"external link container"
>
<
LinkIcon
className
=
{
iconClass
}
/>
<
a
className
=
{
linkClass
}
...
...
src/ensembl/src/shared/components/external-reference/ExternalReference.test.tsx
View file @
5fb91328
...
...
@@ -15,55 +15,67 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
,
screen
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
ExternalReference
,
{
ExternalReferenceProps
}
from
'
./ExternalReference
'
;
import
ExternalLink
from
'
../external-link/ExternalLink
'
;
const
defaultProps
:
ExternalReferenceProps
=
{
label
:
faker
.
random
.
word
s
(),
linkText
:
faker
.
random
.
word
s
(),
label
:
faker
.
random
.
word
(),
linkText
:
faker
.
random
.
word
(),
to
:
faker
.
internet
.
url
(),
classNames
:
{
container
:
faker
.
random
.
word
s
(),
label
:
faker
.
random
.
word
s
(),
icon
:
faker
.
random
.
word
s
(),
link
:
faker
.
random
.
word
s
()
container
:
faker
.
random
.
word
(),
label
:
faker
.
random
.
word
(),
icon
:
faker
.
random
.
word
(),
link
:
faker
.
random
.
word
()
}
};
describe
(
'
<ExternalReference />
'
,
()
=>
{
const
renderExternalReference
=
(
props
:
Partial
<
ExternalReferenceProps
>
=
{}
)
=>
mount
(<
ExternalReference
{
...
defaultProps
}
{
...
props
}
/>);
)
=>
render
(<
ExternalReference
{
...
defaultProps
}
{
...
props
}
/>);
let
wrapp
er
:
any
;
let
contain
er
:
any
;
beforeEach
(()
=>
{
jest
.
resetAllMocks
();
wrapp
er
=
renderExternalReference
();
contain
er
=
renderExternalReference
()
.
container
;
});
it
(
'
renders without error
'
,
()
=>
{
expect
(()
=>
wrapp
er
).
not
.
toThrow
();
expect
(()
=>
contain
er
).
not
.
toThrow
();
});
it
(
'
hides label container div when there is no label
'
,
()
=>
{
wrapp
er
=
renderExternalReference
({
label
:
undefined
});
expect
(
wrapper
.
find
(
'
.label
'
)).
toHaveLength
(
0
);
contain
er
=
renderExternalReference
({
label
:
undefined
})
.
container
;
expect
(
container
.
querySelectorAll
(
'
.label
'
)).
toHaveLength
(
0
);
});
it
(
'
applies the passed in classNames
'
,
()
=>
{
expect
(
wrapper
.
render
().
hasClass
(
defaultProps
.
classNames
?.
container
)
screen
.
getByTestId
(
'
external reference container
'
)
.
classList
.
contains
(
defaultProps
.
classNames
?.
container
as
string
)
).
toBeTruthy
();
expect
(
container
.
querySelector
(
'
.label
'
)
.
classList
.
contains
(
defaultProps
.
classNames
?.
label
)
).
toBeTruthy
();
const
externalLink
=
screen
.
getByTestId
(
'
external link container
'
);
expect
(
externalLink
.
getElementsByTagName
(
'
icon-mock
'
)[
0
]
.
getAttribute
(
'
classname
'
)
).
toMatch
(
defaultProps
.
classNames
?.
icon
as
string
);
expect
(
wrapper
.
find
(
'
.label
'
).
hasClass
(
defaultProps
.
classNames
?.
label
)
externalLink
.
getElementsByTagName
(
'
a
'
)[
0
]
.
classList
.
contains
(
defaultProps
.
classNames
?.
link
as
string
)
).
toBeTruthy
();
expect
(
wrapper
.
find
(
ExternalLink
).
prop
(
'
classNames
'
)).
toEqual
({
icon
:
defaultProps
.
classNames
?.
icon
,
link
:
defaultProps
.
classNames
?.
link
});
});
});
src/ensembl/src/shared/components/external-reference/ExternalReference.tsx
View file @
5fb91328
...
...
@@ -44,7 +44,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
const
labelClass
=
classNames
(
styles
.
label
,
props
.
classNames
?.
label
);
return
(
<
div
{
...
containerProps
}
>
<
div
{
...
containerProps
}
data
-
test
-
id
=
"external reference container"
>
{
!!
props
.
label
&&
<
span
className
=
{
labelClass
}
>
{
props
.
label
}
</
span
>
}
{
props
.
to
?
(
<
ExternalLink
...
...
src/ensembl/src/shared/components/image-button/ImageButton.test.tsx
View file @
5fb91328
...
...
@@ -15,14 +15,12 @@
*/
import
React
from
'
react
'
;
import
{
act
}
from
'
react-dom/test-utils
'
;
import
{
mou
nt
}
from
'
enzyme
'
;
import
{
render
,
fireEvent
}
from
'
@testing-library/react
'
;
import
userEve
nt
from
'
@testing-library/user-event
'
;
import
faker
from
'
faker
'
;
import
{
ImageButton
,
Props
as
ImageButtonProps
}
from
'
./ImageButton
'
;
import
Tooltip
from
'
src/shared/components/tooltip/Tooltip
'
;
import
{
Status
}
from
'
src/shared/types/status
'
;
jest
.
mock
(
...
...
@@ -38,68 +36,70 @@ const defaultProps = {
describe
(
'
<ImageButton />
'
,
()
=>
{
const
renderImageButton
=
(
props
:
Partial
<
ImageButtonProps
>
=
{})
=>
mount
(<
ImageButton
{
...
defaultProps
}
{
...
props
}
/>);
render
(<
ImageButton
{
...
defaultProps
}
{
...
props
}
/>);
it
(
'
renders without error
'
,
()
=>
{
expect
(()
=>
renderImageButton
()).
not
.
toThrow
();
expect
(()
=>
renderImageButton
()
.
container
).
not
.
toThrow
();
});
describe
(
'
prop status
'
,
()
=>
{
it
(
'
has a status set by default
'
,
()
=>
{
const
wrapper
=
renderImageButton
();
expect
(
wrapper
.
prop
(
'
status
'
)).
toEqual
(
Status
.
DEFAULT
);
const
container
=
renderImageButton
().
container
;
expect
(
container
.
querySelectorAll
(
'
.imageButton
'
)[
0
]
.
classList
.
contains
(
Status
.
DEFAULT
)
).
toBeTruthy
();
});
});
describe
(
'
prop description
'
,
()
=>
{
it
(
'
has a description set by default
'
,
()
=>
{
const
wrapper
=
renderImageButton
();
expect
(
wrapper
.
prop
(
'
description
'
)).
toEqual
(
''
);
const
container
=
renderImageButton
().
container
;
expect
(
container
.
querySelector
(
'
img
'
)?.
alt
).
toEqual
(
''
);
});
it
(
'
respects the description prop
'
,
()
=>
{
const
wrapper
=
renderImageButton
({
description
:
'
foo
'
});
expect
(
wrapper
.
prop
(
'
description
'
)).
toEqual
(
'
foo
'
);
const
container
=
renderImageButton
({
description
:
'
foo
'
}).
container
;
expect
(
container
.
querySelector
(
'
img
'
)?.
alt
).
toEqual
(
'
foo
'
);
});
});
describe
(
'
prop image
'
,
()
=>
{
it
(
'
has an image set by default
'
,
()
=>
{
const
wrapper
=
renderImageButton
();
expect
(
wrapper
.
prop
(
'
image
'
)).
toEqual
(
''
);
const
container
=
renderImageButton
().
container
;
expect
(
container
.
querySelector
(
'
img
'
)?.
getAttribute
(
'
src
'
)).
toEqual
(
''
);
});
it
(
'
renders an img tag if a path to an image file is passed
'
,
()
=>
{
const
wrapper
=
renderImageButton
({
image
:
'
foo.png
'
});
expect
(
wrapper
.
find
(
'
button
'
).
find
(
'
img[src="foo.png"]
'
)).
toHaveLength
(
1
);
const
container
=
renderImageButton
({
image
:
'
foo.png
'
}).
container
;
expect
(
container
.
querySelector
(
'
button img
'
)?.
getAttribute
(
'
src
'
)
).
toEqual
(
'
foo.png
'
);
});
it
(
'
renders the svg file passed in
'
,
()
=>
{
const
mockSVG
=
()
=>
{
return
<
svg
/>;
return
<
svg
className
=
"test_svg"
/>;
};
const
wrapp
er
=
renderImageButton
({
image
:
mockSVG
});
expect
(
wrapper
.
find
(
'
button
'
).
find
(
mockSVG
)).
toHaveLength
(
1
);
const
contain
er
=
renderImageButton
({
image
:
mockSVG
})
.
container
;
expect
(
container
.
querySelector
(
'
button .test_svg
'
)).
toBeTruthy
(
);
});
});
describe
(
'
prop classNames
'
,
()
=>
{
it
(
'
applies the default className when no status is provided
'
,
()
=>
{
const
wrapp
er
=
renderImageButton
();
const
contain
er
=
renderImageButton
()
.
container
;
expect
(
wrapper
.
find
(
'
.default
'
)).
toHaveLength
(
1
);
expect
(
container
.
querySelectorAll
(
'
.default
'
)).
toHaveLength
(
1
);
});
it
(
'
applies the respective className depending on the button status
'
,
()
=>
{
const
wrapper
=
renderImageButton
({
status
:
Status
.
SELECTED
});
const
container
=
renderImageButton
({
status
:
Status
.
SELECTED
})
.
container
;
expect
(
wrapper
.
find
(
'
.selected
'
)).
toHaveLength
(
1
);
expect
(
container
.
querySelectorAll
(
'
.selected
'
)).
toHaveLength
(
1
);
});
});
...
...
@@ -110,20 +110,19 @@ describe('<ImageButton />', () => {
});
it
(
'
calls the onClick prop when clicked
'
,
()
=>
{
const
wrapper
=
renderImageButton
({
onClick
});
wrapper
.
simulate
(
'
click
'
);
const
container
=
renderImageButton
({
onClick
}).
container
;
userEvent
.
click
(
container
.
querySelectorAll
(
'
button
'
)[
0
]);
expect
(
onClick
).
toBeCalled
();
});
it
(
'
does not call the onClick prop when clicked if the status is disabled
'
,
()
=>
{
const
wrapp
er
=
renderImageButton
({
const
contain
er
=
renderImageButton
({
onClick
,
status
:
Status
.
DISABLED
});
})
.
container
;
wrapper
.
simulate
(
'
click
'
);
userEvent
.
click
(
container
.
querySelectorAll
(
'
button
'
)[
0
]
);
expect
(
onClick
).
not
.
toBeCalled
();
});
...
...
@@ -131,52 +130,40 @@ describe('<ImageButton />', () => {
describe
(
'
tooltip on hover
'
,
()
=>
{
const
mockSVG
=
()
=>
{
return
<
svg
/>;
return
<
svg
className
=
"test-svg"
/>;
};
const
description
=
faker
.
lorem
.
words
();
const
props
=
{
image
:
mockSVG
,
description
};
const
mouseEnterEvent
=
new
Event
(
'
mouseenter
'
);
const
clickEvent
=
new
Event
(
'
click
'
);
it
(
'
shows tooltip when moused over
'
,
()
=>
{
const
wrapp
er
=
renderImageButton
(
props
);
expect
(
wrapper
.
find
(
T
ooltip
).
length
).
toBe
(
0
);
const
contain
er
=
renderImageButton
(
props
)
.
container
;
expect
(
container
.
querySelectorAll
(
'
.t
ooltip
'
).
length
).
toBe
(
0
);
act
(()
=>
{
wrapper
.
getDOMNode
().
dispatchEvent
(
mouseEnterEvent
);
});
wrapper
.
update
();
fireEvent
.
mouseEnter
(
container
.
querySelectorAll
(
'
.imageButton
'
)[
0
]);
const
tooltip
=
wrapper
.
find
(
T
ooltip
);
expect
(
tooltip
.
length
).
toBe
(
1
);
expect
(
tooltip
.
text
()
).
toBe
(
description
);
const
tooltip
=
container
.
querySelectorAll
(
'
.t
ooltip
'
);
expect
(
tooltip
).
toHaveLength
(
1
);
expect
(
tooltip
[
0
]
.
text
Content
).
toBe
(
description
);
});
it
(
'
does not show tooltip if clicked
'
,
()
=>
{
const
wrapp
er
=
renderImageButton
(
props
);
const
contain
er
=
renderImageButton
(
props
)
.
container
;
act
(()
=>
{
const
rootNode
=
wrapper
.
getDOMNode
();
rootNode
.
dispatchEvent
(
mouseEnterEvent
);
rootNode
.
dispatchEvent
(
clickEvent
);
});
wrapper
.
update
();
fireEvent
.
mouseEnter
(
container
.
querySelectorAll
(
'
.imageButton
'
)[
0
]);