Merge branch 'maps-qc' into e2e-testing

test/cypress/e2e/mapviewer.cy.js

@@ -1,13 +1,16 @@
-// const datasetIds = [150]
-const datasetIds = [150, 155]
-
-// const taxonModels = ['Human Female']
+// const taxonModels = ['Cat']
 const taxonModels = ['Rat', 'Human Female']
+// x: The distance in pixels from the element's left
+// y: The distance in pixels from the element's top
+const coordinates = { 'x': 800, 'y': 325 }
 
 const threeDSyncView = 'Human Male'
 
 const searchInput = 'heart'
 
+// const datasetIds = [150]
+const datasetIds = [150, 155]
+
 describe('Maps Viewer', { testIsolation: false }, function () {
   before(function () {
     cy.visit('/maps?type=ac')
@@ -20,23 +23,28 @@ describe('Maps Viewer', { testIsolation: false }, function () {
       cy.get('.multi-container > .el-loading-parent--relative > .el-loading-mask', { timeout: 30000 }).should('not.exist')
 
       if (model !== 'Rat') {
+        cy.intercept('**/flatmap/**').as('flatmap')
+
         // Switch to the second flatmap
         cy.get('#flatmap-select').click()
         cy.get('.el-select-dropdown__item').should('be.visible')
         cy.get('.el-select-dropdown__item:visible').contains(new RegExp(model, 'i')).click({ force: true })
 
+        cy.wait('@flatmap', { timeout: 20000 })
+
         // Loading mask should not exist after the new flatmap is loaded
         cy.get('.multi-container > .el-loading-parent--relative > .el-loading-mask', { timeout: 30000 }).should('not.exist')
       }
 
       // Open a provenance card
-      cy.get('[style="height: 100%;"] > [style="height: 100%; width: 100%; position: relative;"] > [style="height: 100%; width: 100%;"] > .maplibregl-touch-drag-pan > .maplibregl-canvas').click();
+      cy.get('[style="height: 100%;"] > [style="height: 100%; width: 100%; position: relative;"] > [style="height: 100%; width: 100%;"] > .maplibregl-touch-drag-pan > .maplibregl-canvas').click(coordinates.x, coordinates.y);
 
       // Check for the popover provenance card content
       cy.get('.maplibregl-popup-content > .tooltip-container > .el-main', { timeout: 30000 }).within(() => {
         cy.get('.title').should('exist')
         cy.get('.subtitle').should('exist')
-        cy.get('.attribute-title').contains(/COMPONENTS/i).should('exist')
+        cy.get('.attribute-title').should('exist')
+        cy.get('.attribute-content').should('exist')
       })
 
       // Close the provenance card
@@ -58,32 +66,32 @@ describe('Maps Viewer', { testIsolation: false }, function () {
     cy.get('.multi-container > .el-loading-parent--relative > .el-loading-mask', { timeout: 30000 }).should('not.exist')
 
     // Open the 3D view in a split viewer
-    cy.get('.settings-group.open > .el-row:visible').filter(':contains(Open new map)').within(() => {
-      cy.get('use').click()
-    })
-    cy.get('.open-map-popper:visible').contains(/Open Sync Map/i).click()
+    cy.get('.settings-group > :nth-child(1):visible').contains(/Open new map/i).should('exist')
+    cy.get('.settings-group > :nth-child(1):visible').click()
+    cy.get('.open-map-popper:visible > :nth-child(4) > .el-button').contains(/Open Sync Map/i).should('exist')
+    cy.get('.open-map-popper:visible > :nth-child(4) > .el-button').click()
 
     cy.wait(['@get_body_scaffold_info', '@s3-resource'], { timeout: 20000 })
 
     // Check for the number of displayed viewers
-    cy.get('.toolbar-flex-container', { timeout: 30000 }).should('have.length', 2)
+    cy.get('.toolbar > .toolbar-flex-container', { timeout: 30000 }).should('have.length', 2)
 
     // Check for 3D view's content card detail
-    cy.get('.context-card > .card-right').within(() => {
+    cy.get('.context-card > .card-left > .context-image', { timeout: 30000 }).should('exist')
+    cy.get('.context-card > .card-right', { timeout: 30000 }).within(() => {
       cy.get('.title').contains(/3D human whole-body/i).should('exist')
-      cy.get('p').contains(/Visualization/i).should('exist')
+      cy.get(':nth-child(2) > p').contains(/Visualization/i).should('exist')
       cy.get('.subtitle').contains(/Scaffold Views/i).should('exist')
+      cy.get('.view-image').should('exist')
       cy.get('.view-description').contains(/Human whole-body/i).should('exist')
     })
 
     // Close the pathway sidebar
-    cy.get('.pathway-location > .drawer-button > .el-icon-arrow-left:visible').click()
+    cy.get('[style="height: 100%;"] > [style="height: 100%; width: 100%; position: relative;"] > .pathway-location > .drawer-button > .el-icon-arrow-left').click()
 
     // Search keyword in displayed viewers
-    cy.get('.search-container').within(() => {
-      cy.get('[role="combobox"]').type(searchInput)
-      cy.get('.map-icon > use').click()
-    })
+    cy.get('.el-autocomplete > .el-input > .el-input__inner').type(searchInput)
+    cy.get('.search-container > .map-icon > use').click()
 
     // Check for keyword(highlighted part) in displayed viewers
     cy.get('.maplibregl-popup-content').contains(new RegExp(searchInput, 'i')).should('exist')
@@ -118,9 +126,8 @@ describe('Maps Viewer', { testIsolation: false }, function () {
           cy.wait(['@dataset_info', '@datasets'], { timeout: 20000 })
 
           // Check for search result and the tag 'Scaffold'
-          cy.get('.dataset-card', { timeout: 30000 }).filter(`:contains(${datasetId})`).within(() => {
-            cy.get('.container').contains(/Scaffold/i).should('exist')
-          })
+          cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2)').contains(datasetId).should('exist')
+          cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-right > .badges-container > .container').should('contain', 'Scaffold')
 
           // Close the sidebar
           cy.get('.close-tab > .el-icon-arrow-right').click()