Right now we have the integration tests for jbrowse-web in JBrowse.test.js. I have been having a lot of trouble getting the tests to pass for #430, even where I don't feel like what I did really should affect some of the tests that aren't passing.
After doing a bunch of digging, I've found out that even though we're using afterEach(cleanup), some of the tests are affecting other tests, so they're not isolated from each other. One concrete example is the menus. When you click on a menu title in the menu bar, such as "HELP", it opens the menu. The implementation of the menu in material-ui ends up using ReactDOM.createPortal(menuStuff, document.body), which adds the menu to document.body at the same level as the app, so it looks like:
<body>
<div>
app stuff...
</ div>
<div>
menu stuff...
</ div>
</body>afterEach(cleanup) then only cleans up the original div and not the new menu div. Also, since the only way to search for things in the menu is to search the whole body (since they're all at the root level), different tests that use then menus could end up finding things in menu divs that they didn't create.
We could try to work around this problem (maybe find some way to not use Popper from material-ui), but I get the feeling that this isn't the only cross-test contamination that's happening. It's just the first concrete example I was able to find. So, I think we need to run each integration test in isolation.
I've tried things like creating a new JSDOM document for each test, but can't find a way to have each test in the same file have a different global document. Thus to truly isolate the tests we may have to put each integration test in its own file.
Right now we have the integration tests for jbrowse-web in JBrowse.test.js. I have been having a lot of trouble getting the tests to pass for #430, even where I don't feel like what I did really should affect some of the tests that aren't passing.
After doing a bunch of digging, I've found out that even though we're using
afterEach(cleanup), some of the tests are affecting other tests, so they're not isolated from each other. One concrete example is the menus. When you click on a menu title in the menu bar, such as "HELP", it opens the menu. The implementation of the menu in material-ui ends up usingReactDOM.createPortal(menuStuff, document.body), which adds the menu todocument.bodyat the same level as the app, so it looks like:afterEach(cleanup)then only cleans up the originaldivand not the new menudiv. Also, since the only way to search for things in the menu is to search the whole body (since they're all at the root level), different tests that use then menus could end up finding things in menudivs that they didn't create.We could try to work around this problem (maybe find some way to not use Popper from material-ui), but I get the feeling that this isn't the only cross-test contamination that's happening. It's just the first concrete example I was able to find. So, I think we need to run each integration test in isolation.
I've tried things like creating a new JSDOM document for each test, but can't find a way to have each test in the same file have a different global
document. Thus to truly isolate the tests we may have to put each integration test in its own file.