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
eeb898a0
Unverified
Commit
eeb898a0
authored
Jan 07, 2021
by
Andrey Azov
Committed by
GitHub
Jan 07, 2021
Browse files
Update tests to use react-testing-library (#428)
Migrate tests for components used on the GenomeBrowser page to react-testing-library.
parent
4ce1f116
Pipeline
#120650
passed with stages
in 5 minutes and 34 seconds
Changes
24
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
601 additions
and
467 deletions
+601
-467
src/ensembl/babel.config.js
src/ensembl/babel.config.js
+5
-0
src/ensembl/jest.config.js
src/ensembl/jest.config.js
+4
-1
src/ensembl/package-lock.json
src/ensembl/package-lock.json
+6
-0
src/ensembl/package.json
src/ensembl/package.json
+1
-0
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.test.tsx
...rc/content/app/browser/browser-nav/BrowserNavBar.test.tsx
+12
-5
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarControls.test.tsx
...nt/app/browser/browser-nav/BrowserNavBarControls.test.tsx
+22
-20
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarMain.test.tsx
...ontent/app/browser/browser-nav/BrowserNavBarMain.test.tsx
+40
-31
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarRegionSwitcher.test.tsx
.../browser/browser-nav/BrowserNavBarRegionSwitcher.test.tsx
+19
-20
src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.test.tsx
...c/content/app/browser/browser-nav/BrowserNavIcon.test.tsx
+9
-3
src/ensembl/src/content/app/browser/browser-region-editor/BrowserRegionEditor.test.tsx
...rowser/browser-region-editor/BrowserRegionEditor.test.tsx
+123
-122
src/ensembl/src/content/app/browser/browser-region-field/BrowserRegionField.test.tsx
.../browser/browser-region-field/BrowserRegionField.test.tsx
+86
-99
src/ensembl/src/content/app/browser/browser-region-field/BrowserRegionField.tsx
...t/app/browser/browser-region-field/BrowserRegionField.tsx
+1
-1
src/ensembl/src/content/app/browser/browser-reset/BrowserReset.test.tsx
...c/content/app/browser/browser-reset/BrowserReset.test.tsx
+18
-13
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.test.tsx
.../browser/browser-track-config/BrowserTrackConfig.test.tsx
+27
-28
src/ensembl/src/content/app/browser/chromosome-navigator/ChromosomeNavigator.test.tsx
...browser/chromosome-navigator/ChromosomeNavigator.test.tsx
+63
-45
src/ensembl/src/content/app/browser/track-panel/TrackPanel.test.tsx
...l/src/content/app/browser/track-panel/TrackPanel.test.tsx
+16
-18
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.test.tsx
...rowser/track-panel/track-panel-bar/TrackPanelBar.test.tsx
+48
-7
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.test.tsx
...wser/track-panel/track-panel-list/TrackPanelList.test.tsx
+14
-11
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.test.tsx
.../track-panel/track-panel-list/TrackPanelListItem.test.tsx
+57
-28
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.test.tsx
...er/track-panel/track-panel-modal/TrackPanelModal.test.tsx
+30
-15
No files found.
src/ensembl/babel.config.js
View file @
eeb898a0
...
...
@@ -29,6 +29,11 @@ module.exports = {
}
]
]
},
production
:
{
plugins
:
[
[
'
react-remove-properties
'
,
{
'
properties
'
:
[
'
data-test-id
'
]
}]
]
}
}
};
src/ensembl/jest.config.js
View file @
eeb898a0
...
...
@@ -11,7 +11,10 @@ module.exports = {
},
roots
:
[
'
<rootDir>/src
'
],
setupFiles
:
[
'
<rootDir>/tests/setup-jest.js
'
],
setupFilesAfterEnv
:
[
'
<rootDir>/tests/setup-enzyme.ts
'
],
setupFilesAfterEnv
:
[
'
<rootDir>/tests/setup-enzyme.ts
'
,
'
<rootDir>/tests/setup-rtl.ts
'
],
testEnvironment
:
'
jsdom
'
,
transform
:
{
'
.+
\\
.tsx?$
'
:
'
babel-jest
'
,
...
...
src/ensembl/package-lock.json
View file @
eeb898a0
...
...
@@ -6053,6 +6053,12 @@
"recast": "^0.14.7"
}
},
"babel-plugin-react-remove-properties": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz",
"integrity": "sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==",
"dev": true
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
src/ensembl/package.json
View file @
eeb898a0
...
...
@@ -115,6 +115,7 @@
"babel-core"
:
"7.0.0-bridge.0"
,
"babel-jest"
:
"26.5.2"
,
"babel-loader"
:
"8.1.0"
,
"babel-plugin-react-remove-properties"
:
"0.3.0"
,
"brotli-webpack-plugin"
:
"1.1.0"
,
"compression-webpack-plugin"
:
"5.0.2"
,
"connect-history-api-fallback"
:
"1.6.0"
,
...
...
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.test.tsx
View file @
eeb898a0
...
...
@@ -15,7 +15,7 @@
*/
import
React
from
'
react
'
;
import
{
render
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
jest
.
mock
(
'
./BrowserNavBarControls
'
,
()
=>
()
=>
(
<
div
>
BrowserNavBarControls
</
div
>
...
...
@@ -27,11 +27,18 @@ import { BrowserNavBar } from './BrowserNavBar';
describe
(
'
<BrowserNavBar />
'
,
()
=>
{
describe
(
'
rendering
'
,
()
=>
{
it
(
'
correctly interprets the "expanded" prop
'
,
()
=>
{
const
contractedBar
=
render
(<
BrowserNavBar
expanded
=
{
false
}
/>);
expect
(
contractedBar
.
hasClass
(
'
browserNavBarExpanded
'
)).
toBe
(
false
);
const
{
container
,
rerender
}
=
render
(
<
BrowserNavBar
expanded
=
{
false
}
/>
);
const
browserNavBar
=
container
.
firstChild
as
HTMLDivElement
;
expect
(
browserNavBar
.
classList
.
contains
(
'
browserNavBarExpanded
'
)).
toBe
(
false
);
const
expandedBar
=
render
(<
BrowserNavBar
expanded
=
{
true
}
/>);
expect
(
expandedBar
.
hasClass
(
'
browserNavBarExpanded
'
)).
toBe
(
true
);
rerender
(<
BrowserNavBar
expanded
=
{
true
}
/>);
expect
(
browserNavBar
.
classList
.
contains
(
'
browserNavBarExpanded
'
)).
toBe
(
true
);
});
});
});
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarControls.test.tsx
View file @
eeb898a0
...
...
@@ -15,47 +15,49 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
faker
from
'
faker
'
;
import
times
from
'
lodash/times
'
;
import
BrowserNavIcon
from
'
./BrowserNavIcon
'
;
import
{
BrowserNavBarControls
}
from
'
./BrowserNavBarControls
'
;
import
{
BrowserNavStates
}
from
'
../browserState
'
;
import
Overlay
from
'
src/shared/components/overlay/Overlay
'
;
jest
.
mock
(
'
./BrowserNavIcon
'
,
()
=>
()
=>
<
div
>
BrowserNavIcon
</
div
>);
jest
.
mock
(
'
./BrowserNavIcon
'
,
()
=>
(
props
:
{
enabled
:
boolean
})
=>
{
const
className
=
props
.
enabled
?
'
browserNavIcon enabled
'
:
'
browserNavIcon
'
;
return
<
div
className
=
{
className
}
/>;
});
jest
.
mock
(
'
src/shared/components/overlay/Overlay
'
,
()
=>
()
=>
(
<
div
className
=
"overlay"
/>
));
const
browserNavStates
=
times
(
6
,
faker
.
random
.
boolean
)
as
BrowserNavStates
;
describe
(
'
BrowserNavBarControls
'
,
()
=>
{
let
wrapper
:
any
;
beforeEach
(()
=>
{
wrapper
=
mount
(
it
(
'
has an overlay on top when browser nav bar controls are disabled
'
,
()
=>
{
const
{
container
}
=
render
(
<
BrowserNavBarControls
browserNavStates
=
{
browserNavStates
}
isDisabled
=
{
faker
.
random
.
boolean
()
}
isDisabled
=
{
true
}
/>
);
});
it
(
'
has an overlay on top when browser nav bar controls are disabled
'
,
()
=>
{
wrapper
.
setProps
({
isDisabled
:
true
});
expect
(
wrapper
.
find
(
Overlay
).
length
).
toBe
(
1
);
expect
(
container
.
querySelector
(
'
.overlay
'
)).
toBeTruthy
();
});
it
(
'
disables buttons if corresponding actions are not possible
'
,
()
=>
{
// browserNavStates are an array of booleans that indicate whether the button
// has already caused maximum corresponding effect, and will have no further effect if pressed
wrapper
.
setProps
({
isDisabled
:
false
});
const
{
container
}
=
render
(
<
BrowserNavBarControls
browserNavStates
=
{
browserNavStates
}
isDisabled
=
{
false
}
/>
);
const
controlButtons
=
wrapper
.
find
(
B
rowserNavIcon
);
const
controlButtons
=
container
.
querySelectorAll
(
'
.b
rowserNavIcon
'
);
controlButtons
.
forEach
((
button
:
any
,
index
:
number
)
=>
{
const
hasCausedMaximumEffect
=
browserNavStates
[
index
];
expect
(
button
.
prop
(
'
enabled
'
)).
toBe
(
!
hasCausedMaximumEffect
);
controlButtons
.
forEach
((
button
,
index
)
=>
{
const
isDisabled
=
browserNavStates
[
index
];
expect
(
button
.
classList
.
contains
(
'
enabled
'
)).
toBe
(
!
isDisabled
);
});
});
});
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarMain.test.tsx
View file @
eeb898a0
...
...
@@ -15,20 +15,19 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
userEvent
from
'
@testing-library/user-event
'
;
import
{
BrowserNavBarMain
,
BrowserNavBarMainProps
}
from
'
./BrowserNavBarMain
'
;
import
ChromosomeNavigator
from
'
src/content/app/browser/chromosome-navigator/ChromosomeNavigator
'
;
import
BrowserNavBarRegionSwitcher
from
'
./BrowserNavBarRegionSwitcher
'
;
import
{
BreakpointWidth
}
from
'
src/global/globalConfig
'
;
jest
.
mock
(
'
src/content/app/browser/chromosome-navigator/ChromosomeNavigator
'
,
()
=>
()
=>
<
div
>
C
hromosomeNavigator
</
div
>
()
=>
()
=>
<
div
className
=
"c
hromosomeNavigator
"
/
>
);
jest
.
mock
(
'
./BrowserNavBarRegionSwitcher
'
,
()
=>
()
=>
(
<
div
>
B
rowserNavBarRegionSwitcher
</
div
>
<
div
className
=
"b
rowserNavBarRegionSwitcher
"
/
>
));
const
props
:
BrowserNavBarMainProps
=
{
...
...
@@ -36,46 +35,56 @@ const props: BrowserNavBarMainProps = {
};
describe
(
'
BrowserNavBarMain
'
,
()
=>
{
let
wrapper
:
any
;
beforeEach
(()
=>
{
wrapper
=
mount
(<
BrowserNavBarMain
{
...
props
}
/>);
});
afterEach
(()
=>
{
jest
.
resetAllMocks
();
});
it
(
'
does not render chromosome visualization by default for screens smaller than laptops
'
,
()
=>
{
expect
(
wrapper
.
find
(
ChromosomeNavigator
).
length
).
toBe
(
0
);
const
{
container
}
=
render
(<
BrowserNavBarMain
{
...
props
}
/>);
expect
(
container
.
querySelector
(
'
.chromosomeNavigator
'
)).
toBeFalsy
();
});
it
(
'
renders chromosome visualization by default for laptops or bigger screens
'
,
()
=>
{
wrapper
.
setProps
({
viewportWidth
:
BreakpointWidth
.
LAPTOP
});
const
{
container
}
=
render
(
<
BrowserNavBarMain
{
...
props
}
viewportWidth
=
{
BreakpointWidth
.
LAPTOP
}
/>
);
expect
(
wrapper
.
find
(
C
hromosomeNavigator
).
length
).
toBe
(
1
);
expect
(
wrapper
.
find
(
B
rowserNavBarRegionSwitcher
).
length
).
toBe
(
0
);
expect
(
container
.
querySelector
(
'
.c
hromosomeNavigator
'
)).
toBeTruthy
(
);
expect
(
container
.
querySelector
(
'
.b
rowserNavBarRegionSwitcher
'
)).
toBeFalsy
(
);
});
it
(
'
renders RegionSwitcher when user clicks on Change
'
,
()
=>
{
wrapper
.
setProps
({
viewportWidth
:
BreakpointWidth
.
LAPTOP
});
const
changeButton
=
wrapper
.
find
(
'
.contentSwitcher
'
);
changeButton
.
simulate
(
'
click
'
);
expect
(
wrapper
.
find
(
ChromosomeNavigator
).
length
).
toBe
(
0
);
expect
(
wrapper
.
find
(
BrowserNavBarRegionSwitcher
).
length
).
toBe
(
1
);
const
{
container
}
=
render
(
<
BrowserNavBarMain
{
...
props
}
viewportWidth
=
{
BreakpointWidth
.
LAPTOP
}
/>
);
const
changeButton
=
container
.
querySelector
(
'
.contentSwitcher
'
)
as
HTMLSpanElement
;
userEvent
.
click
(
changeButton
);
expect
(
container
.
querySelector
(
'
.chromosomeNavigator
'
)).
toBeFalsy
();
expect
(
container
.
querySelector
(
'
.browserNavBarRegionSwitcher
'
)
).
toBeTruthy
();
});
it
(
'
renders chromosome visualization when user closes RegionSwitcher
'
,
()
=>
{
wrapper
.
setProps
({
viewportWidth
:
BreakpointWidth
.
LAPTOP
});
const
changeButton
=
wrapper
.
find
(
'
.contentSwitcher
'
);
changeButton
.
simulate
(
'
click
'
);
const
closeButton
=
wrapper
.
find
(
'
.contentSwitcherClose
'
);
closeButton
.
simulate
(
'
click
'
);
expect
(
wrapper
.
find
(
ChromosomeNavigator
).
length
).
toBe
(
1
);
expect
(
wrapper
.
find
(
BrowserNavBarRegionSwitcher
).
length
).
toBe
(
0
);
const
{
container
}
=
render
(
<
BrowserNavBarMain
{
...
props
}
viewportWidth
=
{
BreakpointWidth
.
LAPTOP
}
/>
);
const
changeButton
=
container
.
querySelector
(
'
.contentSwitcher
'
)
as
HTMLSpanElement
;
userEvent
.
click
(
changeButton
);
const
closeButton
=
container
.
querySelector
(
'
.contentSwitcherClose
'
)
as
HTMLSpanElement
;
userEvent
.
click
(
closeButton
);
expect
(
container
.
querySelector
(
'
.chromosomeNavigator
'
)).
toBeTruthy
();
expect
(
container
.
querySelector
(
'
.browserNavBarRegionSwitcher
'
)).
toBeFalsy
();
});
});
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarRegionSwitcher.test.tsx
View file @
eeb898a0
...
...
@@ -15,21 +15,19 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
{
BrowserNavBarRegionSwitcher
}
from
'
./BrowserNavBarRegionSwitcher
'
;
import
BrowserRegionEditor
from
'
../browser-region-editor/BrowserRegionEditor
'
;
import
BrowserRegionField
from
'
../browser-region-field/BrowserRegionField
'
;
import
{
BreakpointWidth
}
from
'
src/global/globalConfig
'
;
jest
.
mock
(
'
src/content/app/browser/browser-region-editor/BrowserRegionEditor
'
,
()
=>
()
=>
<
div
>
B
rowserRegionEditor
</
div
>
()
=>
()
=>
<
div
className
=
"b
rowserRegionEditor
"
/
>
);
jest
.
mock
(
'
src/content/app/browser/browser-region-field/BrowserRegionField
'
,
()
=>
()
=>
<
div
>
B
rowserRegionField
</
div
>
()
=>
()
=>
<
div
className
=
"b
rowserRegionField
"
/
>
);
const
props
=
{
...
...
@@ -39,37 +37,38 @@ const props = {
};
describe
(
'
BrowserNavBarRegionSwitcher
'
,
()
=>
{
let
wrapper
:
any
;
beforeEach
(()
=>
{
wrapper
=
mount
(<
BrowserNavBarRegionSwitcher
{
...
props
}
/>);
});
afterEach
(()
=>
{
jest
.
resetAllMocks
();
jest
.
clearAllMocks
();
});
describe
(
'
rendering
'
,
()
=>
{
it
(
'
renders region field and not region editor on smaller screens
'
,
()
=>
{
expect
(
wrapper
.
find
(
BrowserRegionField
)).
toHaveLength
(
1
);
expect
(
wrapper
.
find
(
BrowserRegionEditor
)).
toHaveLength
(
0
);
it
(
'
renders only region field on smaller screens
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserNavBarRegionSwitcher
{
...
props
}
/>);
expect
(
container
.
querySelector
(
'
.browserRegionField
'
)).
toBeTruthy
();
expect
(
container
.
querySelector
(
'
.browserRegionEditor
'
)).
toBeFalsy
();
});
it
(
'
renders both region field and region editor on big desktop screens
'
,
()
=>
{
wrapper
.
setProps
({
viewportWidth
:
BreakpointWidth
.
BIG_DESKTOP
});
const
{
container
}
=
render
(
<
BrowserNavBarRegionSwitcher
{
...
props
}
viewportWidth
=
{
BreakpointWidth
.
BIG_DESKTOP
}
/>
);
expect
(
wrapper
.
find
(
BrowserRegionEditor
)).
toHaveLength
(
1
);
expect
(
wrapper
.
find
(
BrowserRegionField
)).
toHaveLength
(
1
);
expect
(
container
.
querySelector
(
'
.browserRegionField
'
)).
toBeTruthy
(
);
expect
(
container
.
querySelector
(
'
.browserRegionEditor
'
)).
toBeTruthy
(
);
});
});
it
(
'
calls cleanup functions on unmount
'
,
()
=>
{
const
wrapper
=
mount
(<
BrowserNavBarRegionSwitcher
{
...
props
}
/>);
const
{
unmount
}
=
render
(<
BrowserNavBarRegionSwitcher
{
...
props
}
/>);
expect
(
props
.
toggleRegionEditorActive
).
not
.
toHaveBeenCalled
();
expect
(
props
.
toggleRegionFieldActive
).
not
.
toHaveBeenCalled
();
wrapper
.
unmount
();
unmount
();
expect
(
props
.
toggleRegionEditorActive
).
toHaveBeenCalledWith
(
false
);
expect
(
props
.
toggleRegionFieldActive
).
toHaveBeenCalledWith
(
false
);
...
...
src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.test.tsx
View file @
eeb898a0
...
...
@@ -15,7 +15,8 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
render
}
from
'
@testing-library/react
'
;
import
userEvent
from
'
@testing-library/user-event
'
;
import
{
BrowserNavIcon
}
from
'
./BrowserNavIcon
'
;
import
browserMessagingService
from
'
src/content/app/browser/browser-messaging-service
'
;
...
...
@@ -27,12 +28,17 @@ describe('<BrowserNavIcon />', () => {
test
(
'
sends navigation message when clicked
'
,
()
=>
{
jest
.
spyOn
(
browserMessagingService
,
'
send
'
);
const
renderedNavIcon
=
mount
(
const
{
container
}
=
render
(
<
BrowserNavIcon
browserNavItem
=
{
browserNavItem
}
enabled
=
{
true
}
/>
);
const
button
=
container
.
querySelector
(
'
button
'
)
as
HTMLButtonElement
;
renderedNavIcon
.
find
(
'
button
'
).
simulate
(
'
click
'
);
userEvent
.
click
(
button
);
expect
(
browserMessagingService
.
send
).
toHaveBeenCalledTimes
(
1
);
expect
(
browserMessagingService
.
send
).
toHaveBeenCalledWith
(
'
bpane
'
,
browserNavItem
.
detail
);
(
browserMessagingService
.
send
as
any
).
mockRestore
();
});
...
...
src/ensembl/src/content/app/browser/browser-region-editor/BrowserRegionEditor.test.tsx
View file @
eeb898a0
...
...
@@ -15,31 +15,36 @@
*/
import
React
from
'
react
'
;
import
{
mount
}
from
'
enzyme
'
;
import
{
screen
,
render
,
fireEvent
}
from
'
@testing-library/react
'
;
import
userEvent
from
'
@testing-library/user-event
'
;
import
faker
from
'
faker
'
;
import
{
BrowserRegionEditor
,
BrowserRegionEditorProps
}
from
'
./BrowserRegionEditor
'
;
import
Input
from
'
src/shared/components/input/Input
'
;
import
Select
from
'
src/shared/components/select/Select
'
;
import
Tooltip
from
'
src/shared/components/tooltip/Tooltip
'
;
import
Overlay
from
'
src/shared/components/overlay/Overlay
'
;
import
{
createGenomeKaryotype
}
from
'
tests/fixtures/genomes
'
;
import
{
getCommaSeparatedNumber
}
from
'
src/shared/helpers/formatters/numberFormatter
'
;
import
{
getCommaSeparatedNumber
,
getNumberWithoutCommas
}
from
'
src/shared/helpers/formatters/numberFormatter
'
;
import
{
createChrLocationValues
,
createRegionValidationMessages
}
from
'
tests/fixtures/browser
'
;
import
*
as
browserHelper
from
'
../browserHelper
'
;
describe
(
'
<BrowserRegionEditor />
'
,
()
=>
{
afterEach
(()
=>
{
jest
.
resetAllMocks
();
});
jest
.
mock
(
'
src/shared/components/select/Select
'
,
()
=>
()
=>
(
<
div
className
=
"select"
/>
));
jest
.
mock
(
'
src/shared/components/overlay/Overlay
'
,
()
=>
()
=>
(
<
div
className
=
"overlay"
/>
));
jest
.
mock
(
'
../browserHelper
'
);
describe
(
'
<BrowserRegionEditor />
'
,
()
=>
{
const
initialChrLocation
=
createChrLocationValues
().
tupleValue
;
const
defaultProps
:
BrowserRegionEditorProps
=
{
activeGenomeId
:
faker
.
lorem
.
words
(),
...
...
@@ -52,64 +57,66 @@ describe('<BrowserRegionEditor />', () => {
toggleRegionEditorActive
:
jest
.
fn
()
};
let
wrapper
:
any
;
beforeEach
(()
=>
{
wrapper
=
mount
(<
BrowserRegionEditor
{
...
defaultProps
}
/>
);
jest
.
resetAllMocks
(
);
});
describe
(
'
rendering
'
,
()
=>
{
test
(
'
contains Select
'
,
()
=>
{
expect
(
wrapper
.
find
(
Select
).
length
).
toBe
(
1
);
it
(
'
contains Select
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserRegionEditor
{
...
defaultProps
}
/>);
expect
(
container
.
querySelector
(
'
.select
'
)).
toBeTruthy
();
});
test
(
'
contains two Input elements
'
,
()
=>
{
expect
(
wrapper
.
find
(
Input
).
length
).
toBe
(
2
);
it
(
'
contains two input elements
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserRegionEditor
{
...
defaultProps
}
/>);
expect
(
container
.
querySelectorAll
(
'
input
'
).
length
).
toBe
(
2
);
});
test
(
'
contains submit and close buttons
'
,
()
=>
{
expect
(
wrapper
.
find
(
'
button[type="submit"]
'
)).
toHaveLength
(
1
);
it
(
'
contains submit and close buttons
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserRegionEditor
{
...
defaultProps
}
/>);
expect
(
container
.
querySelector
(
'
button[type="submit"]
'
)).
toBeTruthy
();
});
test
(
'
has an overlay on top when disabled
'
,
()
=>
{
wrapper
.
setProps
({
isDisabled
:
true
});
expect
(
wrapper
.
find
(
Overlay
).
length
).
toBe
(
1
);
it
(
'
has an overlay on top when disabled
'
,
()
=>
{
const
{
container
}
=
render
(
<
BrowserRegionEditor
{
...
defaultProps
}
isDisabled
=
{
true
}
/>
);
expect
(
container
.
querySelector
(
'
.overlay
'
)).
toBeTruthy
();
});
});
describe
(
'
behaviour
'
,
()
=>
{
test
(
'
shows form buttons when focussed
'
,
()
=>
{
wrapper
.
find
(
'
form
'
).
simulate
(
'
focus
'
);
expect
(
wrapper
.
props
().
toggleRegionEditorActive
).
toHaveBeenCalledTimes
(
1
);
it
(
'
shows form buttons when focussed
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserRegionEditor
{
...
defaultProps
}
/>);
const
form
=
container
.
querySelector
(
'
form
'
)
as
HTMLFormElement
;
fireEvent
.
focus
(
form
);
expect
(
defaultProps
.
toggleRegionEditorActive
).
toHaveBeenCalledTimes
(
1
);
});
tes
t
(
'
validates region input on submit
'
,
()
=>
{
i
t
(
'
validates region input on submit
'
,
()
=>
{
const
[
stick
]
=
initialChrLocation
;
const
locationStartInput
=
getCommaSeparatedNumber
(
faker
.
random
.
number
());
const
locationEndInput
=
getCommaSeparatedNumber
(
faker
.
random
.
number
());
const
validateRegion
=
jest
.
fn
();
jest
.
spyOn
(
browserHelper
,
'
validateRegion
'
)
.
mockImplementation
(
validateRegion
);
const
{
container
}
=
render
(<
BrowserRegionEditor
{
...
defaultProps
}
/>);
const
[
firstInput
,
secondInput
]
=
container
.
querySelectorAll
(
'
input
'
);
const
submitButton
=
container
.
querySelector
(
'
button[type="submit"]
'
)
as
HTMLButtonElement
;
wrapper
.
find
(
Input
)
.
first
()
.
simulate
(
'
change
'
,
{
target
:
{
value
:
locationStartInput
}
});
userEvent
.
clear
(
firstInput
);
userEvent
.
type
(
firstInput
,
locationStartInput
);
wrapper
.
find
(
Input
)
.
last
()
.
simulate
(
'
change
'
,
{
target
:
{
value
:
locationEndInput
}
});
userEvent
.
clear
(
secondInput
);
userEvent
.
type
(
secondInput
,
locationEndInput
);
wrapper
.
find
(
'
form
'
).
simulate
(
'
submit
'
);
userEvent
.
click
(
submitButton
);
expect
(
validateRegion
).
toHaveBeenCalledWith
({
expect
(
browserHelper
.
validateRegion
).
toHaveBeenCalledWith
({
regionInput
:
`
${
stick
}
:
${
locationStartInput
}
-
${
locationEndInput
}
`
,
genomeId
:
wrapper
.
p
rops
()
.
activeGenomeId
,
genomeId
:
defaultP
rops
.
activeGenomeId
,
onSuccess
:
expect
.
any
(
Function
),
onError
:
expect
.
any
(
Function
)
});
...
...
@@ -124,11 +131,11 @@ describe('<BrowserRegionEditor />', () => {
const
locationStartInput
=
getCommaSeparatedNumber
(
faker
.
random
.
number
());
const
locationEndInput
=
getCommaSeparatedNumber
(
faker
.
random
.
number
());
const
startError
=
faker
.
lorem
.
words
()
;
const
endError
=
faker
.
lorem
.
words
()
;
const
startError
=
'
start error message
'
;
const
endError
=
'
end error message
'
;
const
mockValidationMessages
=
createRegionValidationMessages
();
tes
t
(
'
displays the start error message
'
,
()
=>
{
i
t
(
'
displays the start error message
'
,
async
()
=>
{
const
mockErrorMessages
=
{
...
mockValidationMessages
.
errorMessages
,
startError
,
...
...
@@ -138,39 +145,33 @@ describe('<BrowserRegionEditor />', () => {
jest
.
spyOn
(
browserHelper
,
'
validateRegion
'
)
.
mockImplementation
(
async
(
params
:
{
regionInput
:
string
;
genomeId
:
string
|
null
;
onSuccess
:
(
regionId
:
string
)
=>
void
;
onError
:
(
errorMessages
:
browserHelper
.
RegionValidationErrors
)
=>
void
;
})
=>
{
params
.
onError
(
mockErrorMessages
);
}
async
({
onError
}:
{
onError
:
(
arg
:
typeof
mockErrorMessages
)
=>
void
;
}):
Promise
<
void
>
=>
onError
(
mockErrorMessages
)
);
wrapper
.
find
(
Input
)
.
first
()
.
simulate
(
'
change
'
,
{
target
:
{
value
:
locationStartInput
}
});