Clean up Cypress E2E tests (#580)

* Fix cypress

* Use test ID to identify Open IFC button

There is an open issue within the cypress-real-events library which
states that the `.realHover()` function is no longer compatible with
Google Chrome after version 100[1].

So we instead proceed with refactoring that test to use test IDs to
match the desired HTML element.

The way this failure shows up during testing is the first use of the
function in question works, but any subsequent usage by other test
cases within the same run will not work.

However, if you retry the test run, it will give a "false positive"
as long as you run within the same Cypress + Google Chrome process.

False positive is in quotes because if you run it again within the
same process pair, it works but if you execute on a different test
runner, you will get a failure.

An example of this consistent failure would be executing this test
suite in GitHub Actions where each run is handled by a new test
runner with a completely different process space.

1: dmtrKovalenko/cypress-real-events#247

* Fix whitespace

---------

Co-authored-by: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>

cypress/e2e/ifc-model/load-sample-model.cy.js

@@ -8,32 +8,30 @@ describe('sample models', () => {
       cy.setCookie('isFirstTime', 'false')
       cy.visit('/')
       cy.get('#viewer-container').get('canvas').should('be.visible')
-
-      // Wait up to 15 seconds for IFC to finish loading
-      cy.get('[data-model-ready="true"]', {timeout: 300000}).should('exist')
+      cy.get('[data-model-ready="true"]').should('exist')
     })
 
     it('should display tooltip when hovering', () => {
-      cy.findByRole('button', {name: 'Open IFC', timeout: 300000}).realHover()
-      cy.findByRole('tooltip', {timeout: 300000}).contains('Open IFC')
+      cy.findByRole('button', {name: 'Open IFC'}).realHover()
+      cy.findByRole('tooltip').contains('Open IFC')
     })
 
     it('should display the sample models dialog', () => {
-      cy.findByRole('button', {name: 'Open IFC', timeout: 300000}).realClick()
-      cy.findByRole('dialog', {timeout: 300000}).contains('Sample Projects')
+      cy.findByTestId('open-ifc').realClick()
+      cy.findByRole('dialog').contains('Sample Projects')
     })
 
     it('should load the Momentum model when selected', () => {
-      cy.findByRole('button', {name: 'Open IFC', timeout: 300000}).realClick()
+      cy.findByTestId('open-ifc').realClick()
       cy.findByLabelText('Sample Projects').realClick()
       cy.intercept('GET', REMOTE_IFC_URL, {fixture: REMOTE_IFC_FIXTURE}).as('loadModel')
-      cy.findByRole('listbox', {timeout: 300000}).within(() => {
-        cy.findByRole('option', {name: 'Momentum', timeout: 300000}).realClick()
+      cy.findByRole('listbox').within(() => {
+        cy.findByRole('option', {name: 'Momentum'}).realClick()
         cy.wait('@loadModel').its('response.statusCode').should('eq', REQUEST_SUCCESS_CODE)
       })
-      cy.findByRole('listbox', {timeout: 300000}).should('not.exist')
-      cy.findByRole('tree', {label: 'IFC Navigator', timeout: 300000})
-      cy.findByText('Proxy with extruded box', {timeout: 300000})
+      cy.findByRole('listbox').should('not.exist')
+      cy.findByRole('tree', {label: 'IFC Navigator'})
+      cy.findByText('Proxy with extruded box')
     })
   })
 })

package.json

@@ -22,8 +22,8 @@
     "test": "jest",
     "cypress": "cypress run",
     "cypress-spec": "cypress run --spec",
-    "cypress-headed": "cypress run --headed --no-exit",
-    "cypress-headed-spec": "cypress run --headed --no-exit --spec",
+    "cypress-headed": "cypress run --headed --browser chrome --no-exit",
+    "cypress-headed-spec": "cypress run --headed --browser chrome --no-exit --spec",
     "write-new-version": "node src/utils/version.mjs > package.json.new && shx mv package.json.new package.json"
   },
   "dependencies": {

src/Components/OpenModelControl.jsx

@@ -39,6 +39,7 @@ export default function OpenModelControl({fileOpen}) {
           icon={<OpenIcon/>}
           placement={'top'}
           selected={isDialogDisplayed}
+          dataTestId='open-ifc'
         />
       </Paper>
       {isDialogDisplayed &&
@@ -63,8 +64,6 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
     fileOpen()
     setIsDialogDisplayed(false)
   }
-
-
   return (
     <Dialog
       icon={<OpenIcon/>}
@@ -82,7 +81,7 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
             textAlign: 'left',
           }}
         >
-          <ModelFileSelector setIsDialogDisplayed/>
+          <ModelFileSelector setIsDialogDisplayed={setIsDialogDisplayed}/>
           <p>Models hosted on GitHub are opened by inserting the link to the file into the Search.</p>
           <p>Visit our {' '}
             <a
@@ -109,7 +108,7 @@ function ModelFileSelector({setIsDialogDisplayed}) {
   const navigate = useNavigate()
   const [selected, setSelected] = useState('')
   const theme = useTheme()
-  const handleSelect = (e) => {
+  const handleSelect = (e, closeDialog) => {
     setSelected(e.target.value)
     const modelPath = {
       0: '/share/v/gh/IFCjs/test-ifc-files/main/Schependomlaan/IFC%20Schependomlaan.ifc#c:60.45,-4.32,60.59,1.17,5.93,-3.77',
@@ -122,7 +121,7 @@ function ModelFileSelector({setIsDialogDisplayed}) {
     }
     window.removeEventListener('beforeunload', handleBeforeUnload)
     navigate({pathname: modelPath[e.target.value]})
-    setIsDialogDisplayed(false)
+    closeDialog()
   }
 
   return (
@@ -158,7 +157,7 @@ function ModelFileSelector({setIsDialogDisplayed}) {
         },
       }}
       value={selected}
-      onChange={(e) => handleSelect(e)}
+      onChange={(e) => handleSelect(e, () => setIsDialogDisplayed(false))}
       variant='outlined'
       label='Sample Projects'
       select